歡迎訪問(wèn)我的博客https://qqqww.com/璧尸，祝碼農(nóng)同胞們?cè)缛兆呱先松鷰p峰窜护，迎娶白富美~~~
與事件的修飾符類似助赞，v-model也有修飾符买羞，用于控制數(shù)據(jù)同步的時(shí)機(jī)
1 v-model.lazy
使用
.lazy修飾符，會(huì)轉(zhuǎn)變?yōu)樵?code>change事件中同步雹食，簡(jiǎn)單粗暴的講就是畜普，此時(shí)數(shù)據(jù)并不會(huì)像我們以前見(jiàn)到的v-model那樣實(shí)時(shí)更新數(shù)據(jù)，而是在失去焦點(diǎn)或者會(huì)車(chē)時(shí)更新群叶，見(jiàn)下面示例代碼
<div id = 'app'>
<input type = 'text' v-model.lazy = 'mes'>
<p>{{ mes }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
mes: ''
}
})
</script>
2 v-model.number
看這個(gè)之前吃挑，需要明確的是，我們輸入的數(shù)字街立，到底是
Number類型還是String類型舶衬，實(shí)際上，雖然輸入的是數(shù)字赎离，但實(shí)際上是String逛犹，那么.number修飾符就可以將輸入的內(nèi)容轉(zhuǎn)化為Number類型
<div id = 'app'>
<input type = 'number' v-model.number = 'mes'>
<p>{{ mes }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
mes: 123456
}
})
</script>
3 v-model.trim
自動(dòng)過(guò)濾輸入的首尾空格
<div id = 'app'>
<input type = 'text' v-model.trim = 'mes'>
<p>{{ mes }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
mes: ' 123456 '
}
})
</script>
