v-model的修饰符

208 阅读1分钟

1、lazy

当使用v-model绑定时,输入框中输入发生改变时,被绑定的值也会同步发生改变,这样可能会对使用有影响。加上lazy修饰符可以使只有input输入框失去焦点或者按空格时才触发。

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

2、number

在使用input的number类型时,用户输入的数字都会被自动转化为字符串,这样对使用会造成麻烦。number修饰符可以让输入的数字保持number的格式。

<input type="number" v-model.number="number" />
<div>{{ number }}</div>
<div>{{ typeof number }}</div>

3、trim

在使用input时,用户在前后输入空格会存入字符串中,trim修饰符可以消除前后的空格。

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