v-mode双向绑定
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
radio绑定
使用v-model就不用name也可以互斥
<div id='app'>
<input type="radio" value="男" v-model='sex'> 男
<input type="radio" value="女" v-model='sex'>女
<h2>您选择的是{{sex}}</h2>
</div>
let app = new Vue({
el:'#app',
data:{
sex:'男' //默认选择男
}
})
复选框分为两种情况:单个勾选框和多个勾选框
- 单个勾选框
- v-model即为布尔值。 此时input的value并不影响v-model的值。
- 多个复选框:.
- 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。
- 当选中某一个时,就会将input的value添加到数组中。
checkbox数组绑定
<div id='app'>
<input type="checkbox" value="篮球" v-model='sex'> 篮球
<input type="checkbox" value="足球" v-model='sex'>足球
<input type="checkbox" value="乒乓球" v-model='sex'>乒乓球
<input type="checkbox" value="羽毛球" v-model='sex'>羽毛球
<h2>您选择的是{{sex}}</h2>
</div>
let app = new Vue({
el:'#app',
data:{
sex:[]
}
})
select-option数组绑定
<div id='app'>
<select v-model="city">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
</select>
<h2>您选择的是{{city}}</h2>
</div>
let app = new Vue({
el:'#app',
data:{
city:'北京' //默认选择北京
}
})