Vue中v-model实现数据双向绑定的另外一种方式
<div id="app">
<input type="text" v-model="message">
<b>{{message}}</b>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"Vue之父-尤雨溪"
},
})
</script>
因为input通过v-model指令绑定了message,所以会实时将输入的内容(input.value)传递给message,message发生改变。
当message发生改变,我们通过Mustache语法( 也就是{{}} )将message的值插入到DOM中,所以DOM会发生响应的改变。
这也就是通过v-model实现数据的双向绑定。
数据的双向绑定还可以用另外一种方式实现,也就是通过v-bind指令和v-on指令。
<div id="app">
<!-- <input type="text" :value="message" @input="message = $event.target.value"> -->
<input type="text" :value="message" @input="valueChange">
<b>{{message}}</b>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"Vue之父-尤雨溪"
},
methods:{
valueChange(event){
this.message = event.target.value;
}
}
})
</script>
这种方式的实现原理:
1:通过v-bind指令绑定input的value属性,将message的值传递给value
2:通过oninput事件监听文本框内容的改变,内容只要发生变化,通过event.target.value获取到文本框内容并赋值给message,这样message就会改变。