目录:
1、v-model基本使用
2、v-model绑定原理
3、v-model绑定radio
4、v-model绑定checkbox
5、v-model绑定select
6、v-model的修饰符
7、v-model值的绑定
一、v-model基本使用
2、v-model绑定原理
其实表面上完成的是事件绑定,但是vue在底层做的事情还很多。
3、v-model绑定radio
(1)在正常情况下(不使用vue)需要在一个表单里面实现单选,为每一个raio设置同一个neme就能做到单选。
(2)当你使用v-model给两个radio绑定同一个变量的时候,就不用依靠name来让radio变成单选按钮:
(3)注意v-model绑定的变量也是要用value来赋予值的,不然变量只会是on,加了calue之后点击按钮就会变成你设置的value值。
4、v-model绑定checkbox
注意:checkbox是单个还是多个选择。同样可以省略name这个标识
1、单选框
这样子在checkbox外层加一个label的效果是点击同意协议这个文字的时候,checkbox也能被选中
单选框里面不需要value,绑定的值就是true或者false
2、多选框
多选框绑定一定要有value属性,不然没有意义
5、v-model绑定select
(1)要注意多选的sekect是要按ctrl键加鼠标左键的。
(2)v-model的位置是在select标签上面
(3)设置多选select要依靠multiple size属性来控制
6、v-model的修饰符
1、lazy修饰符
在鼠标移出输入框或者按回车键的时候可以触发绑定
2、number修饰符
(1)如果绑定的data变量初始值是number类型,但是随后输入框发生修改的时候就会让data类型发生变化从number类型变成string类型,当给number修饰符的时候就会始终变成number类型
(2)虽然type输入的是number类型,你在输入框里面只能输入数字了。但是v-model绑定的data值收到的还是string类型。
3、去除首位空格:
(1)注意:浏览器默认会合并空格,需要输入空格需要输入 &ensp
4、使用多个修饰符
可以同时使用多个修饰符
七、v-model值的绑定
(1)其实就是动态绑定值,使用for in ,服务器给我们data值
版权声明:本文为weixin_56663198原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。