radio
单选框的双向绑定，每个选项都需要设置 value 值和 v-model ，双向绑定就是绑定的这两个值
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
// v-model 必须绑定同一个属性，可以不用设置 name 属性（因为v-model已经确定了单选框的分组）
let vue = new Vue({
el: ‘#app‘,
data: {
sex:‘男‘ //默认值可以通过 v-model 设置初始值实现
},
}
住：input 一般都需要绑定 label ，因为绑定了点击文字也能选中，优化了用户体验
checkbox
单个框（一帮用于用户协议）
用 v-model 绑定 boolear 值来切换选中状态
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意
</label>
<h3>{{isAgree}}</h3>
let vue = new Vue({
el: ‘#app‘,
data: {
sex:‘男‘, //设置初始值实现默认选中
isAgree: false
}
})
多个框
每个选项 v-model 绑定相同的数组，数组内存储的是选中的 value
<label for="apple">
<input type="checkbox" id="apple" value="apple" v-model="fruits">苹果
</label>
<label for="banana">
<input type="checkbox" id="banana" value="banana" v-model="fruits">香蕉
</label>
<label for="orange">
<input type="checkbox" id="orange" value="orange" v-model="fruits">苹果
</label>
<h3>{{fruits}}</h3>
let vue = new Vue({
el: ‘#app‘,
data: {
sex:‘男‘, //设置初始值实现默认选中
isAgree: false,
fruits: [‘apple‘]
},
methods: {
}
})
select
v-model 写在 select 标签上
单选
v-mode 绑定字符串
<select v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<h3>{{city}}</h3>
let vue = new Vue({
el: ‘#app‘,
data: {
sex:‘男‘, //设置初始值实现默认选中
isAgree: false,
fruits: [‘apple‘],
city:‘北京‘,
},
methods: {
}
})
多选
v-model 绑定数组，select 设置属性 multiple，按住 ctrl 选中多个
<select v-model="citys" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<h3>{{citys}}</h3>
let vue = new Vue({
el: ‘#app‘,
data: {
sex:‘男‘, //设置初始值实现默认选中
isAgree: false,
fruits: [‘apple‘],
city:‘北京‘,
citys: []
},
methods: {
}
})
Vue——radio、checkbox、select 标签的双向绑定
原文：https://www.cnblogs.com/angle-yan/p/13456356.html