Vue中v-model结合radio、checkbox单/多选框、select单/多选框的几种特殊写法
一、v-model结合radio类型
radio类型若有了v-model的绑定之后（前提是绑定同一个属性），则 name 可以省略。
<body>
<div id="app">
<label for="male">
<input type="radio" id='male' value="男子" v-model='sex' >男
</label>
<label for="famale">
<input type="radio" id='famale' value="女子" v-model = 'sex'>女
</label>
<h2>您选择的性别是：{
{
sex}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
sex: '男子'
}
})
</script>
</body>
显示情况：
二、v-model结合checkbox单选框
单选框 对应 boolean 值
<body>
<div id="app">
<!-- checkbox单选框 -->
<label for="agree">
<input type="checkbox" id='agree' v-model = 'isAgree'>同意协议
</label>
<h2>您选择的是:{
{
isAgree}}</h2>
<button :disabled = '!isAgree'>下一步</button>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好！',
isAgree:false
}
})
</script>
</body>
显示情况：
三、v-model结合checkbox多选框
多选框 对应一个数组
<body>
<div id="app">
<!-- checkbox多选框 -->
<label for="basket">
<input type="checkbox" value='篮球' id="basket" v-model='hobbies'>篮球
</label>
<label for="foot">
<input type="checkbox" value='足球' id='foot' v-model='hobbies'>足球
</label>
<label for="base">
<input type="checkbox" value='棒球' id='base' v-model='hobbies'>棒球
</label>
<label for="soccor">
<input type="checkbox" value='橄榄球' id='soccor' v-model='hobbies'>橄榄球
</label>
<h2>您选择的爱好是：{
{
hobbies}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好！',
isAgree:false, // 单选框 对应 boolean 值
hobbies:[] // 多选框 对应一个数组
}
})
</script>
</body>
显示情况：
四、v-model结合select单多框
单选框 的存储对应 字符串类型
多选框 的存储对应 数组类型
<body>
<div id="app">
<!-- 1.选择一个 -->
<select name="abc" id="" v-model='fruit'>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="火龙果">火龙果</option>
<option value="猕猴桃">猕猴桃</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是：{
{
fruit}}</h2>
<hr>
<!-- 2.选择多个 -->
<select name="abc" id="" v-model='fruits' multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="火龙果">火龙果</option>
<option value="猕猴桃">猕猴桃</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是：{
{
fruits}}</h2>
</div>
<hr>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好！',
fruit:'葡萄', // 单选框 字符串类型
fruits:[] // 多选框 数组类型
}
})
</script>
</body>
注意：v-model要写在select元素中！
显示情况：
