双向绑定指令可以让我们不用刻意去获取表单数据的时候，显示表单数据

目录

1  简单使用

2  v-model与v-bind:value

3  只有表单元素才能使用v-model

4  修饰符

4.1  .number

4.2  .trim

4.3  .lazy

4.4  修饰符可以同时使用

1  简单使用

打开后是这样的

当我们在input中输入的时候，“用户名是:”后面的文字会随之改变

下面的select也是一样

初始状态的内容也会被填入表单中

重新打开页面后是下面这样的

2  v-model与v-bind:value

修改v-model的表单会修改数据源，修改v-bind:value的表单不会修改数据源

打开后是这样的

当我们修改v-model的input的时候，会修改数据，数据会影响v-bind:value

但修改v-bind:value并不会影响数据

3  只有表单元素才能使用v-model

其他元素使用v-model，不会渲染出v-model指定的内容，并且会出warning

4  修饰符

有三个常用的修饰符

• .number 自动将用户的输入值转为数值类型
• .trim 自动删去用户输入的首位空白字符
• .lazy 表单失去焦点的时候才会更新数据，而不是每进行改动后就更新

我们每个都简单用一下

4.1  .number

我们先看没使用的情况

没使用的时候，username这个变量的类型是字符串

下面再看使用的情况

使用.number后，username这个变量类型为数字

4.2  .trim

没使用的情况

使用的情况

敲空格并不会影响数据，所以当input失去焦点的时候，数据又会重新渲染到input上，所以input失去焦点后也不会显示空格

4.3  .lazy

不使用的时候

每次在表单中输入后都会更新数据

使用的时候

表单失去焦点后，数据更新

4.4  修饰符可以同时使用

我现在按两次空格，再输入123

然后令input失去焦点