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

1 .lazy
v-model 指令默認會在 input 事件中加載輸入框中的數據(中文輸入法中輸入拼音的過程除外)。我們可以使用 .lazy 懶加載修飾符,讓其只在 change 事件中再加載輸入框中的數據。

<input type="text" v-model.lazy="content" placeholder="請輸入" value="初始值">
<p>輸入框:{{content}}</p>

使用 .lazy 懶加載修飾符之後,只有在輸入框失去焦點或者按回車鍵時纔會更新content值。

2 .number
輸入框輸入的內容,即使是數字,默認也是 string 類型,使用 .number 修飾符讓其轉換爲 number 類型
<input type="number" v-model.number="content" placeholder="請輸入" >
<p>輸入值:{{content}},輸入類型:{{typeof content}}</p>

3 .trim
使用.trim修飾符可以自動過濾掉輸入框的首尾空格。
<input type="text" v-model.trim="content" placeholder="請輸入" value="初始值">
<p>輸入框:{{content}}</p>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章