Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說(shuō)明
如下所示:
.lazy
并不是實(shí)時(shí)改變,而是在失去焦點(diǎn)或者按回車時(shí)才會(huì)更新
.number
將輸入轉(zhuǎn)換成Number類型
.trim
可以自動(dòng)過(guò)濾輸入首尾的空格
補(bǔ)充知識(shí):vue通過(guò)v-model,@input, @v-model.lazy幾種輸入框數(shù)據(jù)更新方式的區(qū)別
在使用v-model時(shí),如果用中文輸入法輸入中文,一般在沒(méi)有選定詞組前,也就在拼音階段,Vue是不會(huì)更新數(shù)據(jù)的,當(dāng)敲下漢字時(shí)才會(huì)觸發(fā)更新。如果希望總是實(shí)時(shí)更新,可以用@input來(lái)代替v-model.
<div id='app'> <input type='text' v-model.lazy='message' placeholder='請(qǐng)輸入'> <p>輸入的內(nèi)容是:{{ message }}</p> <input type='text' @input='handleInput' placeholder='請(qǐng)輸入'> <p>輸入的內(nèi)容是:{{ 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會(huì)轉(zhuǎn)變?yōu)樵赾hange事件中同步,這時(shí)。message并不是實(shí)時(shí)改變,而是在失去焦點(diǎn)和按回車時(shí)才會(huì)更新
以上這篇Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
