vue 收集表单数据

要点：

 

这样可以进行把两个控件进行绑定,实现点击账号文字的同时,也会选中text文本框

 

v-model  默认为value

 

 text框默认输入的就是value

而radio则要加value 表示value为对应值

要一开始就默认选择一个则设置一个初始值

因为model为双向绑定

在checkbox中要默认不设置value的话,value则为,复选框的checked

 

 

 

 为什么勾选一个就会同时勾选其他三个：

原因：因为为双向绑定，而你也没设置value值则默认为check中的checked属性当一个勾选则对应的属性就修改为true,则其他也是同样双向绑定的这个属性所以就同时也发生变化

但如果加上value值的话

仍然出现这个问题

这是因为初始值能影响v-model收集回来的值

解决方法：

把hobby属性变成一个数组才是正确的

如果为字符串,只会读一个checked

 

如果啥也没设置按钮当点击按钮时,则会发生页面跳转所有输入的东西都没了

 

解决（因为点击提交时,表单也进行了提交）

 

 

所以在表单提交的事件加一个去掉默认项

把data数据转化成json数据

注意点如果不加v-model的修饰符的话,只要进行输入就会默认输入字符串

当用只用v-model.number=“”写时,就能做到输入数字,并且数字还是数字形式的 但是文本框还能输入字母,但是data属性值任为数字不会进行添加字母

所以当type=“number” v-model.number=“” 一起使用时,就可以做到,既可以只输入数字并且属性值也为数字类型

 

这是vue帮你做了一个处理

v-model修饰符的lazy ：

一般来说当你输入一个值时,会立即发生对应属性的改变

加了lazy修饰符时,实现效果,只有当控件焦点失去的时候才会触发数据收集

trim 修饰符 去掉前后的空格

当不加的时候

加了之后则

 

 总结：