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