学习了 v-bind 指令后,发现这个指令只能实现单向绑定数据,从 M(数据) 自动绑定到 V(视图), 无法实现数据的双向绑定,但是 v-model 可以实现啊
接下来要将的就是 v-model 怎么实现数据的双向绑定,要知道数据双向绑定可是MVVM的强大之处
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" v-bind:value="msg" style="width:100%;">
<input type="text" style="width:100%;" v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
},
methods: {
}
});
</script>
</body>
先看看运行结果:
然后,把第一个输入框的值改变一下:
这里 V 的改变并没有 改变 M(data) 中的值
于是把第二个输入框的值改一下:
会发现,所有都会随着第二个输入框的值改变
由此可以看出,v-bind 只能实现 M 到 V 的单向绑定,而 v-model 可以实现 M 和 V 之间的数据双向绑定,这为我们处理数据和开发提供了极大的遍历
但是有一点需要注意的是:v-model 只能运用在 表单元素中
比如:input(radio, text, address, email....) select checkbox textarea 等