Vue.js 五、双向绑定

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:'男'  //默认选择男
    }
})

复选框分为两种情况：单个勾选框和多个勾选框

1. 单个勾选框

• v-model即为布尔值。 此时input的value并不影响v-model的值。

2. 多个复选框：.

• 当是多个复选框时，因为可以选中多个，所以对应的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:'北京' //默认选择北京
    }
})