如下所示：

.lazy

并不是實時改變，而是在失去焦點或者按回車時才會更新

.number

將輸入轉換成Number類型

.trim

可以自動過濾輸入首尾的空格

補充知識：vue通過v-model，@input, @v-model.lazy幾種輸入框數據更新方式的區別

在使用v-model時，如果用中文輸入法輸入中文，一般在沒有選定詞組前，也就在拼音階段，Vue是不會更新數據的，當敲下漢字時才會觸發更新。如果希望總是實時更新，可以用@input來代替v-model.

<div id='app'> <input type='text' v-model.lazy='message' placeholder='請輸入'> <p>輸入的內容是:{{ message }}</p> <input type='text' @input='handleInput' placeholder='請輸入'> <p>輸入的內容是:{{ message1 }}</p> </div> <script type='text/javascript'> var app = new Vue({ el: ’#app’, data: { message:’’, message1:’’ },methods:{ handleInput:function(e){ this.message1 = e.target.value //原生的DOM事件 } } }) </script>

而v-model也有修飾符，.lazy會轉變為在change事件中同步，這時。message并不是實時改變，而是在失去焦點和按回車時才會更新

以上這篇Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。