v-model 收集表单数据

结论:

        1.如果你需要收集的表单类型,是需要自己敲键盘输入的,那么v-model收集的数据就是你输入的数据。具体常用的有以下几种

 <input type="text">

 <input type="password">

<input type="number">

<textarea></textarea>

                ...

       2. 如果你收集的表单类型为单选框。那么v-model收集的数据为你手动给单选框配置的value值。如:

性别:
     男:<input type="radio" name="sex" v-model="sex"  value="male">
     女:<input type="radio" name="sex" v-model="sex" value="female">

 

最后收集到的数据为‘femal’

      3.如果你需要收集的是复选框

        情况1: 你并没有设置value属性,那么收集到的数据为checked(是一个布尔值)

爱好:
    学习 <input type="checkbox" v-model="hobby" >
    打游戏 <input type="checkbox" v-model="hobby" >
    吃饭 <input type="checkbox" v-model="hobby" >

  没有配置value,收集到的数据为布尔类型

扫描二维码关注公众号,回复: 14925042 查看本文章

        情况2:你配置了value属性,但是v-model的初始值为非数组,那么收集到的情况与情况1一致

爱好:
    学习 <input type="checkbox" v-model="hobby" value="study">
    打游戏 <input type="checkbox" v-model="hobby" value="game">
    吃饭 <input type="checkbox" v-model="hobby" value="eat">

 

当hobby的初始值为空字符时,我收集到的hobby为 布尔类型

        情况3:你配置了value属性,v-model的初始值为数组,那么最终收集到的数据为value组成的数组。

爱好:
    学习 <input type="checkbox" v-model="hobby" value="study">
    打游戏 <input type="checkbox" v-model="hobby" value="game">
    吃饭 <input type="checkbox" v-model="hobby" value="eat">

 

 

 hobby的初始值为[],此时勾选了打游戏和吃饭,那么hobby收集到的数据为study和game组成的数组。

扩展:

        v-model的修饰符    

1.trim  : 忽略空格

2.lazy : 失去焦点时收集value值

3.number  :强制转变为number类型

猜你喜欢

转载自blog.csdn.net/A_adadada/article/details/127677619
今日推荐