v-model绑定input单选、多选、下拉的使用方法

2023/11/21 技术

1、v-model绑定radio单选框 ,绑定radio需要设置vlue的值,model会把vlaue值传到data变量中

<input type="radio" name="sex" v-model="sex" value="man"><input type="radio" name="sex" v-model="sex" value="wumen">
1
2
3

2、v-model绑定checkbox多选框,多选可分为绑定一个或者多个 v-model都要写在每一个checkbox上

①一个多选框情况例如同意协议功能,一个多选框选中传的值是布尔类型

同意协议

②多个checkbox多选框,这个的值就是数组类型

中国

美国

这里的countries传的值就是数组类型,数组保存多个选项

3、v-model绑定select,注意vmodel写在select上而不是option上,如果多选就加一个multiple属性

 <select name="shuiguo" v-model="fruit" multiple>

    <option value="苹果" >苹果</option>

    <option value="香蕉" >香蕉</option>

    <option value="橘子" >橘子</option>

    <option value="南瓜" >南瓜</option>

   </select>
1
2
3
4
5
6
7
8
9
10
11
    LOSER
    米津玄師