vue学习 v-model 双向数据绑定

Posted 2021-11-26 xuchao0506

//html
<div id="app">
　　　　<input type="text"v-model="msg" style="width:100%">
</div>

//script
<script>
　　var vm = new Vue({
　　　　el:‘app‘,
　　　　data:{
　　　　　　msg:‘点击一下‘
　　　　}
　　})
</script>

说明：

v-bind只能实现数据的单向绑定 从model 自动绑定到 view中，无法实现数据的双向绑定

v-model指令可以实现 表单元素和model中数据的双向绑定 v-model只能运用在表单元素中，即除了能够实现数据从model渲染到到view，也能实现从view中道model中去

 

效果：

页面渲染完成之后，会有一个点击一下 和一个input，input的内容是点击一下   修改input中的值，页面上的点击一下 会随着input内容的变化而变化