说说 Vue.js v-model 指令的修饰符

0.447字数 204阅读 1113

1 .lazy

v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据。

html:

<div id="app">
    <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值">
    <p>输入框:{{content}}</p>
</div>

js:

var app = new Vue({
    el: '#app',
    data: {
        content: ''
    }
});

效果:

使用 .lazy 懒加载修饰符之后,只有在输入框失去焦点或者按回车键时才会更新 content 值。

2 .number

输入框输入的内容,即使是数字,默认也是 string 类型:

在此,我们可以使用 .number 修饰符让其转换为 number 类型——

html:

<div id="app2">
    <input type="number" v-model.number="content" placeholder="请输入" >
    <p>输入值:{{content}},输入类型:{{typeof content}}</p>
</div>

js:

var app2 = new Vue({
    el: '#app2',
    data: {
        content: 1
    }
});

效果:

3 .trim

使用 ·.trim` 修饰符可以自动过滤掉输入框的首尾空格。

html:

<div id="app3">
    <input type="text" v-model.trim="content" placeholder="请输入" value="初始值">
    <p>输入框:{{content}}</p>
</div>

js:

var app3 = new Vue({
    el: '#app3',
    data: {
        content: ''
    }
});

以上示例 DEMO

推荐阅读更多精彩内容