单选框，多选框 ，下拉框获取值，都需要用v-model绑定。
单选框和下拉框绑定的是字符串 ，多选框绑定的是数组。
下拉框的v-model是写在select标签里的，不是写在option标签里的。
例子：
<template>
<div>
<!-- （1）单选框，多选框和下拉框都要value，如果是循环的选项，那就要用:value （2）单选框和下拉框,v-model绑定的值是字符串，多选框绑定的值是数组-->
<input type="checkbox" v-model="items" value="篮球">篮球
<input type="checkbox" v-model="items" value="足球">足球
<input type="checkbox" v-model="items" value="跑步">跑步
<p>你选择的是<span v-for="(item,i) in items" class="items">{{item}}</span></p>
<input type="radio" v-model="item" value="李子" name="test">李子
<input type="radio" v-model="item" value="梨子" name="test">梨子
<input type="radio" v-model="item" value="栗子" name="test">栗子
<p>你选择的是{{item}}</p>
<!-- 下拉框的v-model是写在select里的，不是写在option里 -->
<select name="" id="" v-model="selectItem">
<option :value="item" v-for="(item,i) in selectItems">{{item}}</option>
</select>
<p>你选择的是{{selectItem}}</p>
</div>
</template>
<script>
export default {
name: "Home",
data () {
return {
items:[],
item:"",
selectItem:"张三",// 下拉框必须设置默认值
selectItems:["张三","李四","王五"]
};
}
}
</script>
<style lang="css" scoped>
.items{
display: inline-block;
width: 50px;
height: 30px;
margin-right: 12px;
}
</style>
