vue的数据双向绑定和ref获取dom节点

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

vue是一个MVVM的框架

业务逻辑代码即js部分是model部分，

html是view部分。

当model改变的时候，view也会改变

view 改变是，model也会改变

<template>
<div id="app">
{{msg}}
<br>
<input type="text" v-model="msg" ref="inp"/> //ref属性，是为了在model重获取dom节点用的
<button v-on:click="getMsg">获取 </button>
<button v-on:click="setMsg">设置</button>
</div>
</template><script>
export default {
name: 'app',
data () {
return {
msg: 'fsafasad' }
},
methods:{
getMsg:function(){ alert(this.msg)//获取model重的msg值，
},
setMsg:function(){
this.msg="fasdf"; //设置model重的msg值
console.log(this.$refs.inp.value) ;
this.$refs.inp.style.background="red"; ///改变view的属性
首先获取dom节点，通过view重的ref，然后this.$refs.(ref) 来获取dom节点，然后对dom节点进行赋值操作 } }}
</script><style></style>