7-Vue：v-model使用

v-model用来实现数据的双向绑定

1、表单绑定v-model



解析：我们在输入框输入内容时，因为input中的v-mode绑定了message和passwd，所以会实时将输入的内容传递给message,message发生改变。当message发生改变时，因为上面使用mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变；所以v-model实现了双向绑定

2、v-model与输入域绑定

3、v-mode原理：

上述注释的与未注释的input等价，也就是说v-model其实是一个语法糖，它的背后本质上包含两个操作：
   v-bind绑定一个value属性
   v-on指令给当前元素绑定input事件，监听用户输入

4、v-model与单选框绑定：

5、v-model与复选框的绑定
复选框分为两种情况：单个勾选框与多个勾选框
单个勾选框：v-model即为布尔值；此时input的value并不影响v-model的值，value在这里是没用的



多个复选框：因为可以选中多个，多以对应的data中的属性是一个数组；当选中一个时，就会将input中的value添加到数组中

改进写法：

6、v-model与select的绑定：
和checkbox一样，select也分为单选和多选两种情况
单选：只能选中一个值；v-model绑定的是一个变量，当我们选中option中的一个时，会将它对应的value赋值到该变量中

多选：可以选中多个值；v-mode绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到该数组中

7、修饰符：
lazy修饰符：默认情况下，v-mode默认是在input事件中同步输入框的数据的，也就是说一旦有数据发生改变，则对应的data中的数据就会自动发生改变；lazy修饰符可以让数据在失去焦点或回车才更新

number修饰符：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被字符当作字符串类型处理；但如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理；number修饰符可让在输入框中输入的内容自动转成数字类型
原始：



输入内容123后：

改进：

trim修饰符：如果输入的内容首位有很多空格，通常我们希望将其取除；trim修饰符可以去掉内容左右两边的空格