Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說明
更新時(shí)間：2020年08月05日 10:41:04 作者：專業(yè)填坑的猴子
這篇文章主要介紹了Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
如下所示：
.lazy
并不是實(shí)時(shí)改變，而是在失去焦點(diǎn)或者按回車時(shí)才會(huì)更新
.number
將輸入轉(zhuǎn)換成Number類型
.trim
可以自動(dòng)過濾輸入首尾的空格
補(bǔ)充知識(shí)：vue通過v-model，@input, @v-model.lazy幾種輸入框數(shù)據(jù)更新方式的區(qū)別
在使用v-model時(shí)，如果用中文輸入法輸入中文，一般在沒有選定詞組前，也就在拼音階段，Vue是不會(huì)更新數(shù)據(jù)的，當(dāng)敲下漢字時(shí)才會(huì)觸發(fā)更新。如果希望總是實(shí)時(shí)更新，可以用@input來代替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的用法說明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何自定義InputNumber計(jì)數(shù)器組件
這篇文章主要介紹了vue如何自定義InputNumber計(jì)數(shù)器組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
聊天工具的項(xiàng)目開發(fā)到了表情功能,由于目前會(huì)話的輸入?yún)^(qū)域使用的是 textarea 而非富文本編輯器,所以表情功能也需要兼顧 textarea 進(jìn)行開發(fā),本文給大家簡(jiǎn)單聊聊幾種表情的實(shí)現(xiàn)方,感興趣的小伙伴一起來看看吧2025-01-01
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
BEM是一種前端命名方法論,主要是針對(duì)CSS,意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡(jiǎn)寫,這種命名方法讓CSS便于統(tǒng)一團(tuán)隊(duì)開發(fā)規(guī)范和方便維護(hù),本文給大家介紹了Vue3配置bem樣式架構(gòu),需要的朋友可以參考下2024-10-10
這篇文章主要為大家介紹了Vue2?this直接獲取data和methods原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
使用vue-cli webpack 快速搭建項(xiàng)目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項(xiàng)目的教程詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue中如何更改element-ui主題色，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了Vue鍵盤事件用法總結(jié)，詳細(xì)的介紹了各種鍵盤事件的用法，有興趣的可以了解一下2017-04-04
這篇文章主要介紹了Proxy代理對(duì)象詳解,Proxy 是ES6中提供的一個(gè)非常強(qiáng)大的功能，可以用來代理另一個(gè)對(duì)象，從而攔截、監(jiān)視并修改這個(gè)對(duì)象的各種操作,需要的朋友可以參考下2023-04-04