首页 > vue开发 > vue开发教程11：获取DOM节点数据和设置DOM节点数据

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

作者： honor 分类：vue开发点击: 10,013 次

标签： vue.js开发

扫描下面的二维码，“关注”我的百家号。

在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节点的数据也是非常方便的哦。