Vue 中收集表单内容

vue中收集表单内容我们使用 v-model 指令,默认收集表单的value值

一、input 框

v-model与input框绑定默认绑定的是input 的value 值,用户输入的就是value值。

//简写
<input type="text" v-model="userName">
//完整写法

<input type="text" v-model:value="userName">

二、radio单选

最常用的就是性别选项框,男或者女,如果是一组,那么使用 v-model 绑定一个一样的值,value写不同的值

男<input type="radio" name="sex" v-model="sex" value="男">
女<input type="radio" name="sex" v-model="sex" value="女"> 

三、checkbox多选或单个选项

如果 checkbox中没有写value值,那么v-model收集的是 checked 的bool值,勾选为true,不勾选为false
如果写了value值,收集的就是value值的数组
vue data 中的初始值会影响收集的数据类型,如果绑定checked 可以用字符串,如果是value值,可以用数组
1、爱好多选

	学习<input type="checkbox" v-model="hobby" value="study">
	睡觉<input type="checkbox" v-model="hobby" value="sleep">
	吃饭<input type="checkbox" v-model="hobby" value="eat">
//数据类型是数组
        data:{
               hobby:[]
             }

2、是否选中,单选

<input type="checkbox" v-model="agree">
//数据类型是字符串
    data:{
               hobby:‘‘
             }

四、下拉单选框

  <select v-model="city">
	<option value="">请选择校区</option>
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option value="shenzhen">深圳</option>
  </select>

五、小结:

如果:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
如果:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。
如果:<input type="checkbox"/>
1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2.配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

Vue 中收集表单内容

上一篇:Keil5使用模拟器rtt工程


下一篇:RocketMQ:(1) NameServer、Producer