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可以单选也可以多选。
标签：checkbox,app,sex,结合,radio,hobbies,model 来源： https://www.cnblogs.com/zhanghua-lijie/p/14910432.html