Vue的双向绑定一(v-model和输入框)
vue.js提供了v-model指令,用于在表单类元素上双向绑定数据。
比如:在输入框上使用时,输入框的内容会实时映射到绑定的数据上。
<div id="app9">
<input type="text" v-model="message" />
<p>输入的数据是:{{message}}</p>
</div>
<script type="text/javascript">
var app9 = new Vue({
el:"#app9",
data:{
message:''
}
})
</script>
- 在输入框输入的同时{{message}}也会实时将内容渲染在视图中。对文本与textarea也是同样的用法。
- 注意:使用v-model后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value值,对于在之间插入的值也会生效。
- 使用v-model时,如果是用中文输入法输入中文,一般在没有选定词之前,也就是拼音阶段,Vue是不会更新数据的,当敲下时才会触发更新。如果希望总是实时更新,可以用==@input==来代替v-model。
事实上,v-model也是一个特殊的语法糖,只不过他会在不同的表单上智能处理。
<div id="app10">
<input type="text" @input="handInput" />
<p>输入的数据是:{{message}}</p>
</div>
<script type="text/javascript">
var app9 = new Vue({
el:"#app10",
data:{
message:''
},
methods:{
handInput:function(e){
//方法里的this ---> #app10
this.message = e.target.value
}
}
})
</script>