vue的表单操作（Vue2表单控件的使用）

vue的表单操作（Vue2表单控件的使用）select的开启多选，增mutiple即可。value属性不是必须的，但我们一般会采用value，这样可以将其选中对应的状态值（如id）而非文本传递给服务器。 select 单选 <!--如果Option中有value值，v-model会优先匹配value，没有value 的情况下就会直接去找text--> <select v-model="select"> <option>aaa</option> <option>bbb</option> <option value="3">ccc</option> </select> <br/> se

指令v-model用于双向数据绑定，只能使用在表单控件中：

1.text文本框和password密码框控件

请输入：<input type="text" v-model="text"><br/> 输入的内容:{{text}} 请输入：<input type="password" v-model="text"><br/> 输入的内容:{{text}} vm中data： text:""

如果input中有value属性，value属性会被忽略

2.radio单选按钮

radio的单选项 <input type="radio" v-model="isradio" value="singlonradio">只有一个单选按钮 <br/> radio的多选项 <div> <input type="radio" v-model="mutiradio" value="1">a <input type="radio" v-model="mutiradio" value="2">b <input type="radio" v-model="mutiradio" value="3">c <input type="radio" v-model="mutiradio" value="4">d </div> vm中data isradio:"singlonradio" //单选项就一个值(value属性值|true) mutiradio:"2" //多选项是一个字符串

如果只有一个radio，radio因为选中后是不能取消选中状态，因此isradio的值是不能再次变动。

radio的单选项建议增加value属性，当isradio的值为true或者当前value属性值时，radio为选中状态，否则为未选中状态，选中状态下值都为null，isradio的值原则上不使用boolean表达，另此种只有一个radio的情况很少使用，只作一个M>>V的初始化单向数据绑定。

radio的多选项：v-model绑定在一个字符mutiradio中，mutiradio中的值只能为value属性的值（无value属性为null），因此value属性是必须的，当mutiradio中带有某个value属性值时，此radio默认选中，多radio绑定在同一个mutiradio时，radio是互斥的，只能选中其中一个。

3.checkbox复选框

checkbox的单选项 <input type="checkbox" v-model="ischeckbox">只有一个单选按钮 <br/> checkbox的多选项 <div> <input type="checkbox" v-model="mutichecked" value="a">1 <input type="checkbox" v-model="mutichecked" value="b">2 <input type="checkbox" v-model="mutichecked" value="c">3 <input type="checkbox" v-model="mutichecked" value="d">4 </div> vm中data: ischeckbox:true //单选项是一个boolean值 mutichecked:[] //多选项是一个数组

checkbox的单选项：会忽略value属性，绑定的数据是个boolean值，true中选中状态，false为未选中状态

checkbox的多选项：绑定的数据是个数组，数组中的值为value属性的值，如果没有value属性，当前选项在数组中为null，因此value属性是必须的。

4.select下拉列表

select 单选 <!--如果Option中有value值，v-model会优先匹配value，没有value 的情况下就会直接去找text--> <select v-model="select"> <option>aaa</option> <option>bbb</option> <option value="3">ccc</option> </select> <br/> select 多选 <select v-model="mutiselect" multiple> <option value="1">aaa</option> <option value="2">bbb</option> <option value="3">ccc</option> </select> vm中data: select："" mutiselect:[]

如果Option中有value属性，data数据会优先匹配value，没有value 的情况下就会直接去匹配相应的文本

select的开启多选，增mutiple即可。value属性不是必须的，但我们一般会采用value，这样可以将其选中对应的状态值（如id）而非文本传递给服务器。

5.select中循环添加option

将data中的对象数组中的name生成option的text，id生成value属性值用于data的数据采集

循环添加option <select v-model="sel"> <option v-for="(op index) in list" :value="op.id">{{ op.name }}-{{index}}</option> </select> vm中data:对象数组 list:[ {id:1 name:"张三"} {id:2 name:"李四"} {id:3 name:"王五"} ] sel:"" //选中状态下接收到id值

采用指令v-for将list中的数组循环生成option标签，v-for="(value index) in list" 循环取出的第一个是数组中的每个值，第二个index是当前option中页面中的本地索引（下标0开始）