- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
在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节点的数据也是非常方便的哦。
描述很有用描述很有用描述很有用
这个虽然不常用 但是用的最顺手