vue v-model 的修饰符
时间: 2023-10-14 12:14:20 浏览: 48
Vue 的 v-model 指令是用来实现表单元素与组件的双向数据绑定的,它会自动根据表单元素或组件的类型绑定相应的事件和属性。v-model 本质上是一个语法糖,它实际上是将 :value 和 @input 两个属性绑定到一个表单元素或组件上。
v-model 还支持一些修饰符,可以用来改变默认行为,常用的修饰符包括:
- .lazy:默认情况下,v-model 会在 input 事件触发后同步数据,使用 .lazy 修饰符可以让它改为在 change 事件触发后同步数据。
- .number:如果绑定的值需要转为数字类型,可以使用 .number 修饰符,它会自动将输入的字符串转为数字。
- .trim:如果绑定的值需要去除首尾空格,可以使用 .trim 修饰符,它会自动去除输入的字符串首尾的空格。
例如,使用 .lazy 修饰符的 v-model 示例:
```html
<template>
<div>
<input v-model.lazy="message" />
</div>
</template>
```
使用 .number 修饰符的 v-model 示例:
```html
<template>
<div>
<input v-model.number="age" type="number" />
</div>
</template>
```
使用 .trim 修饰符的 v-model 示例:
```html
<template>
<div>
<input v-model.trim="username" />
</div>
</template>
```