• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程11:获取DOM节点数据和设置DOM节点数据

    vue开发教程11:获取DOM节点数据和设置DOM节点数据

    作者: 分类:vue开发 点击: 201 次
    wordpress CMS主题:ssmay主题

      在HTML5中,我们可以通过JS来获取和设置表单或DOM节点的数据,如:document.getElementsByTagName('div')[0].innerText="设置数据",设置第一个div的值。在vue框架中,同样,可以获取和设置DOM元素的数据。

      1:获取和设置input表单数据。

      <input type="text" name="user" v-model="msg">
      <button v-on:click="setmsg()">获取msg值</button>
      <button v-on:click="setmsg()">设置msg</button>

      data () {
      return {
      msg: 'Welcome ',
      }
      },
      methods:{
      //获取data中的msg的值
      getmsg:function(){ //原始JS设置对象方法的方式
      alert(this.msg);
      },
      //设置data中的msg的值
      setmsg(){ //es6设置对象方法的方式
      this.msg=”gaogaogao”;
      }
      }

      上例中,点击“获取msg值”按钮,就会弹出input的原值Welcome ;点击“设置msg",就会修改input表单里的值为”gaogaogao”。

      2:获取和设置DOM节点的内容

      <div ref="box">我在上海</div>
      <button v-on:click="getbox()">获取div的内容</button>
      <button v-on:click="setbox()">设置div的内容</button>

      methods:{
      getbox(){
      alert(this.$refs.box.innerText);
      },
      setbox(){
      this.$refs.box.innerText="这里是中国上海";
      }
      }

      这里用到了一个ref属性,它是用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用ref,引用指向的就是DOM元素本身。如果用在子组件上,引用就指向组件实例。注:ref=”box”要与getbox()方法中的$refs.box对应,否则会出错。通过上面的例子,vue框架获取和设置DOM节点的数据也是非常方便的哦。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809246990.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“vue开发教程11:获取DOM节点数据和设置DOM节点数据”

    1. xiaojiudy说道:

      这个虽然不常用 但是用的最顺手

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.