相信很多小伙伴都被w-model的名字"双向数据绑定"给糊弄了,其实v-model是单向数据绑定的,只是一个伪双向绑定,先来了解下v-on,v-bind,v-model的作用
v-on
v-on是用来绑定事件的,比如给按钮添加点击事件,我们可以写成v-on:click=‘handle’,也可以简写为@click=‘handle’
v-bind
v-bind用来绑定文本或属性,绑定文本跟v-text差不多,能够绑定的属性有html中的属性、css的样式、对象、数组、number 类型、boolean类型。
v-bind是单向绑定,它在绑定文本时,当data中的数据发生变化时,页面中的数据也相应改变,但页面中的数据改变不会影响到data。
v-model
v-model实现了页面中的数据与data中的数据同步变化,通常用来给表单添加绑定。
通过v-on,v-bind来实现表单数据绑定
<div id='app'>
<div>{{msg}}</div>
<input type="text" v-bind:value="msg" v-on:input="handle">
<div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello'
},
methods:{
handle:function(event){
this.msg=event.target.value
// console.log(this.msg)
}
}
})
</script>
通过v-model实现数据绑定
<div id='app'>
<div>{{msg}}</div>
<input type="text" v-model="msg">
<div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello'
},
})
</script>
通俗点来讲v-on
,v-bind
其实是由data数据来改变view视图,v-model
恰好相反,它是由view视图来改变data数据的,v-model
只是通过v-on
,v-bind
实现的语法糖,其实是一个单向数据绑定,也可以说是伪双向绑定.