使用修饰符

Vue 提供了这三个修饰符：.lazy、.number 和 .trim，我们可以将它们与 v-model 一起使用来改变默认事件或为表单输入添加额外功能。让我们深入了解一下。

添加 .lazy

我们可以使用 .lazy 与 v-model 来将 <input> 和 <textarea> 元素的输入事件（input）改为变更事件（change）。请看以下示例：

// src/components/modifiers.vue
<input v-model.lazy="form.name" type="text">

现在，输入框的数据会在 change 事件（而非默认的 input 事件）触发后才同步更新。

添加 .number

我们可以使用 .number 与 v-model 来将 type="number" 的 <input> 元素的默认字符串类型转换为数字类型。请看以下示例：

// src/components/modifiers.vue
<input v-model.number="form.age" type="number">

现在，this.form.age 的类型会是数字（而非未添加 .number 时的字符串）。

添加 .trim

我们可以使用 .trim 与 v-model 来自动去除用户输入的首尾空格。请看以下示例：

// src/components/modifiers.vue
<textarea v-model.lazy.trim="form.message"></textarea>

现在用户的输入内容会被自动修剪，文本开头和结尾的任何多余空格都将被移除。

虽然编写自定义验证逻辑是可行的，但已有优秀的插件能轻松验证输入并显示对应错误。这个名为 VeeValidate 的插件是一个基于模板的 Vue 验证框架。下一节我们将探索如何利用这个插件。