說說 Vue.js v-model 指令的修飾符

摘要： 1 .lazy v-model 指令預設會在 input 事件中載入輸入框中的資料（中文輸入法中輸入拼音的過程除外）。我們可以使用 .lazy 懶載入修飾符，讓其只在 change 事件中再載入輸入框中的資料。 html： <div id="a...

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: ''
}
});

以上示例 ofollow,noindex">DEMO