我们知道vue中 为简化表单输入 提供了v-model 的语法绑定 将 vue的属性和表单元素进行了双向绑定 大大简化了表单数据操作的数据绑定
那么v-model 是如何实现双向绑定的呢？
今天我们来做个最简单的模拟 照例 先上代码
<body>
<div id="app">
【v-model】
<input type="text" v-model="message">
{{message}}
【模拟】
<input type="text" @input="changeInput" :value="message">
</div>
</body>
<script language="JavaScript">
var vm = new Vue({
el: "#app",
data: {
message: ""
},
methods: {
changeInput: function (e) {
this.message = e.target.value;
}
}
})
//组件化应用构建
</script>
我们知道v-model 与数据绑定后 输入框中的数据改变时，vue的属性也会改变，反之 当vue的属性改变之后，输入框中的值也发生改变
我们进行模拟时就注意这两个方面即可
1.输入vue属性改变 这个通过@input 属性可以实现 当输入框内容改变时 这个方法将会被调用
那么我们可以在这个方法中对vue 属性进行赋值
2.当属性发生改变后 input 内容发生改变 也就是input的 value 属性发生了改变
那么我可以通过 vue属性与input 输入框的value 属性进行绑定就可以实现