Vue 中 v-model 的修饰符 (如：.lazy, .number, .trim) 有哪些？

推荐答案

在 Vue 中，v-model 的修饰符主要有以下几种：

1. .lazy：将 input 事件改为 change 事件，即在输入框失去焦点或按下回车时才更新数据。
2. .number：将用户输入的值自动转换为数字类型。
3. .trim：自动去除用户输入内容的首尾空白字符。

本题详细解读

.lazy 修饰符

默认情况下，v-model 在每次 input 事件触发时都会同步输入框的值与数据。使用 .lazy 修饰符后，v-model 会在 change 事件（如输入框失去焦点或按下回车）时才会同步数据。

<input v-model.lazy="message">

.number 修饰符

.number 修饰符会将用户输入的值自动转换为数字类型。如果输入的值无法被解析为数字，则返回原始字符串。

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

.trim 修饰符

.trim 修饰符会自动去除用户输入内容的首尾空白字符。这在处理表单输入时非常有用，可以避免不必要的空格影响数据。

<input v-model.trim="username">

这些修饰符可以单独使用，也可以组合使用，以满足不同的需求。例如：

<input v-model.lazy.trim="username">

在这个例子中，v-model 会在输入框失去焦点时同步数据，并且会自动去除首尾空白字符。