《跟热饭一起学习vue吧》Part.20 表单和v-model

v-model

原生的表单大家应该都见过，这个form标签内有很多输入。

<form>  </form>

那么vue能不能让表单的数据跟着改动呢？当然可以，我们之前学习了一个指令，它可以绑定input输入框的内容，它就是v-model

我们当时最后说了一句，v-model还能绑定很多跟值有关的元素标签，其中form表单内的诸如选框，输入框，单选多选等等，都可以用v-model来进行动态绑定。

来看下面的例子：v-model在多行文本框的使用textarea

再看看这个例子: v-model 在单、复选框的使用checkbox

这个例子：v-model 在选择框的应用radio

可以看出，绑定后，变量存出的是这个input的value

例子：v-model 在下拉列表的使用select

可以看出，v-mode是写在select标签内的，并且存储的值是里面option子选项的value

修饰符

上面看了那么多应用场景，最后再来学习下修饰符，牛逼吧，v-mode居然和v-on一样也有修饰符。

用法：v-model.修饰符 = '变量名'

懒惰修饰符 : .lazy

可以让输入框的值发生变化的时候才同步，而不是只点进去就开始每次都同步。这样显然性能更好。

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

转整形修饰符：.number

可以给输入转成整形给到vue构造器中的变量。

自动过滤收尾空格: .trim

v-model.trim

好了本节课就到这里，怎么样，是不是感觉很简单？？？