关于vue表单中，单选、多选、复选、下拉选的使用

2024-07-17 00:40| 来源: 网络整理| 查看: 265

vue表单选项的使用

单选

使用v-model指令给每个选项绑定同一个变量就可以确保只有一个被选中，同时value属性表示选中时的值。

单选：男女已选：{{gender}} var vm = new Vue({ el:'#app', data:{ gender:'man'//男女单选 } }) 复选框 1、单个复选

使用v-model指令绑定单选值，默认单选值为false,通过改变选框来改变值的状态

单个复选： a 已选：{{single}} var vm = new Vue({ el:'#app', data:{ single:false//单个复选框 } }) 2、多个值复选

使用v-model指令绑定一个变量，这些变量放在一个对象中，默认值都为false,通过改变选框来改变对象数据中值的状态

多个值复选： a b c 已选：{{more}} var vm = new Vue({ el:'#app', data:{ more:{a:false,b:false,c:false}//多个值复选 } }) 3、多个复选

使用v-model指令v-model绑定一个相同的属性名称，这些变量放在一个数组中，值属性放在一个数组中

多个复选： a b c 已选：{{multi.join(',')}} var vm = new Vue({ el:'#app', data:{ multi:[]//多个复选 } }) 下拉选

使用v-for指令，避免重复书写option标签，默认一个选项值为空，同时用v-bind指令绑定value属性。当选中某一项时，该选项的value值赋给selected变量

下拉选：请选择一个选项 {{item.text}} 已选:{{selected}} var vm = new Vue({ el:'#app', data:{ items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],//下拉选数据 selected:''//下拉选值 } })

综合全部代码：

Document 单选：男女已选：{{gender}} 单个复选： a 已选：{{single}} 多个值复选： a b c 已选：{{more}} 多个复选： a b c 已选：{{multi.join(',')}} 下拉选：请选择一个选项 {{item.text}} 已选:{{selected}} var vm = new Vue({ el:'#app', data:{ gender:'man',//男女单选 single:false,//单个复选框 more:{a:false,b:false,c:false},//多个值复选 multi:[],//多个复选 items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],//下拉选数据 selected:''//下拉选值 } })

全部效果展示：在这里插入图片描述

【本文地址】

公司简介

联系我们