要点:
这样可以进行把两个控件进行绑定,实现点击账号文字的同时,也会选中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 修饰符 去掉前后的空格
当不加的时候
加了之后则
总结: