v-model修飾符在vue中可以說是使用頻率最高的指令之一，其修飾符也是前端程序員需掌握的知識點。

1. trim

使用：v-model.trim
作用：可以自動過濾掉輸入框的首尾空格。
demo：

html

<div id="trimDemo">
    <input type="text" v-model.trim="content" placeholder="請輸入內容" value="初始值">
    <p>輸入框：{{content}}</p>
</div>

js

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

2. lazy懶加載修飾符

使用：v-model.lazy
作用：v-model 指令默認會在 input 事件中加載輸入框中的數(shù)據(jù)（中文輸入法中輸入拼音的過程除外）。我們可以使用 .lazy 懶加載修飾符，讓其只在 change 事件中再加載輸入框中的數(shù)據(jù)。使用 .lazy 懶加載修飾符之后，只有在輸入框失去焦點或者按回車鍵時才會更新 content 值。
demo：

html

<div id="lazyDemo">
    <input type="text" v-model.lazy="content" placeholder="請輸入內容" value="初始值">
    <p>輸入框：{{content}}</p>
</div>

js

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

3. number修飾符

使用：v-model.number
作用：input輸入框輸入的內容，即使是數(shù)字，默認也是 string 類型，可以使用 .number 修飾符讓其轉換為 number 類型。
demo：

html

<div id="numberDemo">
    <input type="text" v-model.number="content" placeholder="請輸入內容" value="初始值">
    <p>輸入：{{content}}，輸出類型：{{ typeof content }}</p>
</div>

js

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

以上示例代碼：DEMO