双向绑定指令可以让我们不用刻意去获取表单数据的时候,显示表单数据
目录
1 简单使用
2 v-model与v-bind:value
3 只有表单元素才能使用v-model
4 修饰符
4.1 .number
4.2 .trim
4.3 .lazy
4.4 修饰符可以同时使用
打开后是这样的
当我们在input中输入的时候,“用户名是:”后面的文字会随之改变
下面的select也是一样
初始状态的内容也会被填入表单中
重新打开页面后是下面这样的
修改v-model的表单会修改数据源,修改v-bind:value的表单不会修改数据源
打开后是这样的
当我们修改v-model的input的时候,会修改数据,数据会影响v-bind:value
但修改v-bind:value并不会影响数据
其他元素使用v-model,不会渲染出v-model指定的内容,并且会出warning
有三个常用的修饰符
我们每个都简单用一下
我们先看没使用的情况
没使用的时候,username这个变量的类型是字符串
下面再看使用的情况
使用.number后,username这个变量类型为数字
没使用的情况
使用的情况
敲空格并不会影响数据,所以当input失去焦点的时候,数据又会重新渲染到input上,所以input失去焦点后也不会显示空格
不使用的时候
每次在表单中输入后都会更新数据
使用的时候
表单失去焦点后,数据更新
我现在按两次空格,再输入123
然后令input失去焦点