在提交表单时，经常需要获取radio,checkbox,select类型的input标签的值，使用v-model指令能很好的获取页面的数据，下面使用简单的例子来说明一下用法。
radio
话不多说，代码如下：
<!-- HTML代码 -->
<div id="app">
<label for="male">
<input type="radio" id="male" name="gender" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="gender" value="女" v-model="sex">女
</label>
<!-- 显示所选的值 -->
<h1>{{ sex}}</h1>
</div>
// JS代码
const app = new Vue({
el:"#app",
data:{
sex:"男"
},
methods:{}
})
从代码可注意三点：
1. 书写input输入框时，最好外层包裹label标签，加上for属性，用于定位
2. v-model绑定所选值
3. 给input_radio标签value值
checkbox
获取input_checkbox的值时，有两种情况：
第一种是单选（同意，下一步场景）
第二种情况多选
第一种情况实现代码如下：
<!-- HTML代码 -->
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<br>
<button :disabled="!isAgree">下一步</button>
<!-- 显示所选的值 -->
<h1>{{ isAgree }}</h1>
</div>
// JS代码
const app = new Vue({
el:"#app",
data:{
isAgree:false,
},
methods:{}
})
当点击 同意协议时 下一步按钮才能被点击
多选的小demo,如下：
<!-- HTML代码 -->
<div id="app">
<label for="basketball">
<input type="checkbox" id="basketball" v-model="hobbies" value="篮球">篮球
</label>
<label for="football">
<input type="checkbox" id="football" v-model="hobbies" value="足球">足球
</label>
<label for="tabletennis">
<input type="checkbox" id="tabletennis" v-model="hobbies" value="乒乓球">乒乓球
</label>
<!-- 显示所选的值 -->
<h1>{{ hobbies }}</h1>
</div>
// JS代码
const app = new Vue({
el:"#app",
data:{
hobbies:["篮球"],
},
methods:{}
})
对多个input_checkbox绑定同一个数组hobbies，点击每个input时，将value值会传入hobbies数组,在上面demo中，默认选择 篮球
select
获取input_select的值时，有两种情况：
第一种是单选
第二种情况多选
第一种情况实现代码如下：
<!-- HTML代码 -->
<div id="app">
<select v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="橘子">橘子</option>
</select>
<!-- 显示所选的值 -->
<h1>{{ fruit }}</h1>
</div>
// JS代码
const app = new Vue({
el:"#app",
data:{
fruit:'',
},
methods:{}
})
上边demo中，将选定的值赋给fruit,也可对fruit初始化
多选的小demo,如下：
<!-- HTML代码 -->
<div id="app">
<select v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="橘子">橘子</option>
</select>
<!-- 显示所选的值 -->
<h1>{{ fruits.length }}</h1>
</div>
// JS代码
const app = new Vue({
el:"#app",
data:{
fruits:[],
},
methods:{}
})
对多个select绑定同一个数组fruits，点击每个fruits时，将value值会传入fruits数组
值绑定
上边的例子，每一个选项的值都是写死的，但是在实际应用中，一些值可能是从后台获取，动态赋值，如下面一个例子：
<!-- HTML代码 -->
<div id="app">
<label for="index" v-for="(item,index) in hobbies">
<input type="checkbox" v-model="hobbiesSelected" :value="item" :id="index">{{index}}.{{item}}
</label>
<!-- 显示所选的值 -->
<h1>{{ hobbiesSelected }}</h1>
</div>
// JS代码
const app = new Vue({
el:"#app",
data:{
hobbies:["篮球","健身","羽毛球","台球"],
hobbiesSelected:[]
},
methods:{}
})
参考文献
版本说明
V1.0_radio,checkbox,select获取值 2019年11月19
