目录:

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 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_56663198/article/details/127090313