目录：

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值