v-model结合radio,checkbox与select

2021/6/21 6:28:52

编程Tag： checkbox radio APP 结合 model sex hobbies

本文主要是介绍v-model结合radio,checkbox与select，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

radio单选框的`name`属性是互斥的，如果使用v-model，可以不使用`name`就可以互斥。
```html   <div id="app">          <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">          <h2>单选框</h2>     <label for="agree">       <input type="checkbox" id="agree" v-model="isAgree">同意协议     </label>
    <div>你选择的结果是：{{isAgree}}</div>
    <button :disabled="!isAgree">下一步</button>          <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>       
    <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 name="fruit" v-model="fruit">       <option value="苹果">苹果</option>       <option value="香蕉">香蕉</option>       <option value="西瓜">西瓜</option>     </select>     <h2>你选择的水果是：{{fruit}}</h2>
         <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可以单选也可以多选。

这篇关于v-model结合radio,checkbox与select的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

v-model结合radio,checkbox与select

相关编程文章