【Vue表单】v-model的修饰符

微信订阅号：Rabbit_svip

在使用v-model绑定单行文本框时，还能用以下修饰符来实现某些需求

v-model的常用修饰符有以下几种

1. lazy
2. number
3. trim
4. debounce（在Vue2.0后被移除）

---

.lazy

在默认情况下，v-model 在input事件中同步输入框的值与数据。
如xxx链接所示。

在添加了lazy之后，会把 oninput 事件改成 onchange 事件。

以下是核心代码

<input type="text" v-model.lazy="msg">

以下是本例全部代码

<template>
  <div id="app">
    <input type="text" v-model.lazy="msg">
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: ''
    }
  }
}
</script>

微信订阅号：Rabbit_svip

可以看到，input框输入的内容并不会实时更新到p标签里。因为这里使用了 lazy 修饰符，把 oninput 事件改成 onchange 事件。

---

.number

number 修饰符会把 v-model 的值转换成数值类型。

以下是核心代码

<input type="text" v-model.number="msg">

以下是本例全部代码

<template>
  <div id="app">
    <input type="text" v-model.number="msg">
    <p>{{msg}} : {{typeof(msg)}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: ''
    }
  }
}
</script>

微信订阅号：Rabbit_svip

需要注意的是，如果输入的第一个字是字符串，那number这个修饰符就不会生效。
输入的第一个只能是数字或者小数点或者是正负号。

从上图可以看到，如果一开始输入的是数字，后面跟着字符串。再number的转换后，会把后面的字符串删掉。

---

.trim

trim的作用是过滤用户输入时首尾的空格字符。

以下是核心代码

<input type="text" v-model.trim="msg">

以下是本例全部代码

<template>
  <div id="app">
    <input type="text" v-model.trim="msg">
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: ''
    }
  },
  watch: {
    msg(newValue) {
      console.log(newValue);
    }
  }
}
</script>

微信订阅号：Rabbit_svip

这里用了 watch 来监听 msg ，每当 msg 的值有更新，就会在控制台输出更新后的值。

从控制台可以看到，我们在值的前后输入空格，通过 trim 转换后得到的新值首位的空格都是被清除了。

---

.debounce

设置一个最小的延时，在每次输入之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作（例如，在输入提示中的AJAX请求）时，它比较有用。
但实际上，这是控制了状态更新的频率，而不是控制高耗时任务本身。这是个微小的差别，但是会随着应用增长而显现出局限性。
所以在Vue2.0之后就被移除了。

<input type="text" v-model="msg" debounce="500">

延时500毫秒。
如果想用这个修饰符，就需要使用Vue2.0之前的版本。