绑定表单控件和绑定普通控件并无二致。但是因为控件绑定常常涉及到双向绑定,此时使用v-model让它更加简单。比如checkbox:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="checkbox" v-bind:checked="checked">v-bind</input><br/>
<label>{{ checked }}</label>
</div>
<script>
var a= new Vue({
el: '#app',
data(){
return {checked : true}
}
}
)
</script>
把checked数据绑定到input的checked属性上。然而,这样的绑定都是单向的,就是说:
如果checked数据修改了,那么DOM属性就会修改
如果DOM属性修改了,checked数据并不会修改
所以,当我们点击界面上的输入控件时,尽管此控件会打钩或者去掉打钩,但是label的文字并不会更新。
由于在vue2.0中,之前有的.sync修饰符本来可以做双向绑定,但是此特性已经被删除,所以如果想要使用v-bind做到双向绑定的话,可以加入事件来监视变化,并更新checked数据即可:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="checkbox" ref="c2"v-bind:checked="checked" @change="change">v-bind</input><br/>
<label for="checkbox">{{ checked }}</label>
</div>
<script>
var a= new Vue({
el: '#app',
data(){
return {checked : true}
},
methods:{
change(){
this.checked = this.$refs.c2.checked
}
}
}
)
</script>
这样做也太麻烦了,鉴于双向绑定也比较常用的,因此vue引入了一个指令v-model,可以使用它简化此工作:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="checkbox" v-model="checked">v-model</input><br/>
<label for="checkbox">{{ checked }}</label>
</div>
<script>
var a= new Vue({
el: '#app',
data(){return {checked : true} }
}
)
</script>
可以用v-model指令在控件上创建双向数据绑定。正如我们已经看到的v-model是v-bind和v-on的语法糖,但是确实很甜。
作者:刘传君
创建过产品,创过业。好读书,求甚解。
可以通过 1000copy#gmail.com 联系到我
出品
bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...