# 双向绑定
# v-model
<input type="text" v-model="message">
<h2>{{message}}</h2>
1
2
2
# 双向绑定的原理
通过监听input事件，拿到event.target.value，更新message的值。
<input type="text" :value="message" @input="inputChange">
<h2>{{message}}</h2>
1
2
2
methods:{
inputChange(event){
this.message = event.target.value
}
}
1
2
3
4
5
2
3
4
5
# v-model绑定其他表单
<div id='box'>
<input type="checkbox" v-model="checkgroup" value="vue"/>vue
<input type="checkbox" v-model="checkgroup" value="react"/>react
<input type="checkbox" v-model="checkgroup" value="jquery"/>jquery
</div>
1
2
3
4
5
2
3
4
5
new Vue({
el:'#box',
data:{
checkgroup:[];
}
})
1
2
3
4
5
6
2
3
4
5
6
# v-model修饰符
- lazy
取代 input 监听 change 事件
<div id='box'>
<input v-model.lazy='mytext'>
<!-- 这里的mytext不会实时修改而是在input失去焦点的时候才会修改-->
{{mytext}}
</div>
1
2
3
4
5
2
3
4
5
- number
输入字符串转为有效的数字
<input type="number" v-model.number="mynumber"/>
{{mynumber}}
1
2
2
- trim
输入首尾空格过滤
<input type="text" v-model.trim="myusername"/>
|{{myusername}}|
1
2
2