v-model的修饰符

 1.lazy修饰符

输入框失去光标跳动，即失焦状态，或者敲击回车时，输入框的值才动态绑定，以此减少过度频繁的绑定

<div id="app">
  <input type="text" v-model.lazy="message">
  <h2>{{message}}h2>
div>

2.number修饰符

v-model默认给变量赋值时，都是string类型。number修饰符可以改变强制转换为string类型的情况。

<input type="number" v-model="age">

即使age一开始赋值是数字类型，但是一旦更改输入框内容，age自动变为string类型

  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}h2>

当添加number修饰符时，即使age最初是string类型，一旦改变输入框内容，age变为number类型

3.trim修饰符

当输入文本两端有大量空格时，我们可以使用trim修饰符去掉。

此外，当然可以不使用trim修饰符，使用trim函数处理获得的文本

未添加trim修饰符时：

 添加trim修饰符时：

 

  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}h2>