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í)，如果用中文輸入法輸入中文，一般在沒有選定詞組前，也就在拼音階段，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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何在vue項(xiàng)目中嵌入jsp頁(yè)面的方法(2種)
這篇文章主要介紹了如何在vue項(xiàng)目中嵌入jsp頁(yè)面的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue 修改 data 數(shù)據(jù)問(wèn)題并實(shí)時(shí)顯示操作
這篇文章主要介紹了vue 修改 data 數(shù)據(jù)問(wèn)題并實(shí)時(shí)顯示操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
解決vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗問(wèn)題
這篇文章主要介紹了vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗，本文通過(guò)實(shí)例代碼給大家分享解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vuex中的state屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中v-bind:style效果的自定義指令，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
今天小編就為大家分享一篇關(guān)于vue組件事件屬性穿透詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue的ElementUI form表單如何給label屬性字符串中添加空白占位符
這篇文章主要介紹了vue的ElementUI form表單如何給label屬性字符串中添加空白占位符問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁(yè)面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁(yè)面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果2018-01-01