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