vue双向数据绑定

最新推荐文章于 2021-12-03 10:27:07 发布

vipona999

最新推荐文章于 2021-12-03 10:27:07 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/vipona999/article/details/112793731

版权

本文深入探讨了Vue.js中的双向数据绑定机制。通过示例代码展示了如何使用`Object.defineProperty`实现数据监听和更新，以及在实际Vue组件中`v-model`的工作方式。文章还包含了一个简单的Vue实例，演示了数据模型`msg`的绑定和方法`add`的调用，强调了数据驱动视图的概念。

摘要由CSDN通过智能技术生成

vue双向数据绑定原理

<div>        
<input type="text" id="input">        
<p id="text"></p>    
</div>    
<script>
/*        
var inputDom= document.getElementById("input");        var textDom= document.getElementById("text");
inputDom.οninput=function(){            textDom.innerHTML= inputDom.value;
}
*/
var inputDom= document.getElementById("input");
var textDom= document.getElementById("text");
var obj={};       
var val=""        
Object.defineProperty(obj,"msg",{            
get(){                
return val;            
},            
set(newVal){                
val=newVal;                
inputDom.value= val;                textDom.innerHTML=val;            
}        
})
inputDom.oninput=function(){    
obj.msg = inputDom.value;    console.log(obj)}
 </script>

vue双向数据绑定

<div id="app">        
h1>{{ msg }} </h1>        
<ul>            
<li v-for="v in arr"> {{v}} </li>        
</ul>
<input type="text" v-model="msg">        
<p>{{msg}} </p>        
<input type="button" value="提交" @click="add">    
</div>
<script>        
new Vue({            
el:"#app",            
// model 数据模型            
data:{                
msg:"hello world",                
arr:["aa","bb","cc"]            
},            
methods: {                
add(){                    
alert(this.msg)                  
}            
},        
})    
</script>