與事件的修飾符類似，v-moddel也有修飾符，用于控制同步的時機

.lazy修飾符

在輸入框中，v-model是默認在input事件中同步輸入框的數據。

使用修飾符.lazy會轉變為在change事件中同步.

就是在失去焦點或者按回車才更新。

?<div id="app"><input type="text" v-model.lazy="message"><p>{{message}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>var app = new Vue({el:'#app',data:{message:''}}) </script>

.number

使用修飾符number可以將輸入轉換成Number類型，否則不管是否輸入數字，其實都是String。

<div id="app"><input type="number" v-model.number="message"><p>{{typeof? message}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>var app = new Vue({el:'#app',data:{message:123456}}) </script>

?

.trim

修飾符.trim 可以自動過濾輸入的首位空格。

?<div id="app"><input type="text" v-model.trim="message"><p>{{message}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>var app = new Vue({el:'#app',data:{message:''}}) </script>

?

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的v-modedl的修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。