单选框，多选框，下拉框值的绑定和获取选项

单选框，多选框 ，下拉框获取值，都需要用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>

 

转载于:https://www.cnblogs.com/luguankun/p/10811199.html