v-model结合radio,checkbox与select


​ radio单选框的`name`属性是互斥的,如果使用v-model,可以不使用`name`就可以互斥。
```html   <div id="app">     <!-- name属性radio互斥 使用v-model可以不用name就可以互斥 -->     <label for="male">       <input type="radio" id="male" name="sex" value="男" v-model="sex">男     </label>     <label for="female">         <input type="radio" id="female" name="sex" value="女" v-model="sex">女     </label>     <div>你选择的性别是:{{sex}}</div>
  </div>   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>   <script>     const app = new Vue({       el:"#app",       data:{         message:"zzz",         sex:"男"       },
    })   </script> ```
  v-model绑定`sex`属性,初始值为“男”,选择女后`sex`属性变成“女”,因为此时是双向绑定。
## 10.4 v-model结合checkbox类型
​ checkbox可以结合v-model做单选框,也可以多选框。
```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>v-model结合checkbox类型</title> </head> <body>   <div id="app">     <!-- checkbox单选框 -->     <h2>单选框</h2>     <label for="agree">       <input type="checkbox" id="agree" v-model="isAgree">同意协议     </label>
    <div>你选择的结果是:{{isAgree}}</div>
    <button :disabled="!isAgree">下一步</button>     <!-- checkbox多选框 -->     <h2>多选框</h2>
      <label :for="item" v-for="(item, index) in oriHobbies" :key="index">         <input type="checkbox" name="hobby" :value="item" :id="item" v-model="hobbies">{{item}}       </label>       <!-- <input type="checkbox" name="hobby" value="篮球" v-model="hobbies">篮球       <input type="checkbox" name="hobby" value="足球" v-model="hobbies">足球       <input type="checkbox" name="hobby" value="羽毛球"  v-model="hobbies">羽毛球       <input type="checkbox" name="hobby" value="乒乓球"  v-model="hobbies">乒乓球 -->
    <div>你的爱好是:{{hobbies}}</div>
  </div>   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>   <script>     const app = new Vue({       el:"#app",       data:{         message:"zzz",         isAgree:false,         hobbies:[],         oriHobbies:["篮球","足球","羽毛球","乒乓球"]       },
    })   </script> </body> </html> ```
1. checkbox结合v-model实现单选框,定义变量`isAgree`初始化为`false`,点击checkbox的值为`true`,`isAgree`也是`true`。 2. checkbox结合v-model实现多选框,定义数组对象`hobbies`,用于存放爱好,将`hobbies`与checkbox对象双向绑定,此时选中,一个多选框,就多一个true,`hobbies`就添加一个对象。


## 10.5 v-model结合select类型
```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>v-model结合select类型</title> </head> <body>   <div id="app">     <!-- select单选 -->     <select name="fruit" v-model="fruit">       <option value="苹果">苹果</option>       <option value="香蕉">香蕉</option>       <option value="西瓜">西瓜</option>     </select>     <h2>你选择的水果是:{{fruit}}</h2>
    <!-- select多选 -->     <select name="fruits" v-model="fruits" multiple>       <option value="苹果">苹果</option>       <option value="香蕉">香蕉</option>       <option value="西瓜">西瓜</option>     </select>     <h2>你选择的水果是:{{fruits}}</h2>   </div>   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>   <script>     const app = new Vue({       el:"#app",       data:{         fruit:"苹果",         fruits:[]       },
    })   </script> </body> ```
​ v-model结合select可以单选也可以多选。
上一篇:23种设计模式(八)-原型设计模式


下一篇:04原型模式