一文輕松了解v-model及其修飾符
前言
用來綁定數(shù)據(jù)和元素value值，實(shí)現(xiàn)雙向綁定。
當(dāng)元素的值改變的時(shí)候，數(shù)據(jù)也改變，反過來，當(dāng)數(shù)據(jù)發(fā)生改變，元素的值也改變。
在大部分情況下，所有用戶的輸入值都要通過v-model,一來好用，二來安全，而且功能也很強(qiáng)大。
<div class="app">
<input type="text" v-model="name">
{{name}}
</div>
var app = new Vue({
el:'.app',
data:{
name:'Alice'
}
});
v-model的修飾符：
lazy
懶惰，表示惰性更新，不會(huì)立馬更新。
事實(shí)上它是觸發(fā)了一個(gè)change事件。
好處：當(dāng)用戶輸入完了才綁定，才會(huì)顯示表單驗(yàn)證的結(jié)果，不管正確還是錯(cuò)誤。但在用戶輸入的過程中，不去打擾他。另外性能也有一點(diǎn)點(diǎn)的提高（不過很小，可以忽略不計(jì)）
<div class="app">
<input type="text" v-model.lazy="name">
{{name}}
</div>
trim
修剪; 切去，割掉，這里表示：去掉前后兩端的所有空格
<div class="app">
<input type="text" v-model.trim="name">
{{name}}
</div>
number
一般用于年齡、價(jià)錢等可以用數(shù)字來表示的類型
<div class="app">
<input type="text" v-model.number="age">
{{age}}
</div>
在通常情況下，如果沒有number，用戶輸入的是數(shù)字，但是也是字符串的數(shù)字。如果這里填了修飾符 v-model.number那么得到就是number類型的數(shù)字了，不用再轉(zhuǎn)換了。
v-model除了能在input 的type為text輸入框中使用，還能在其他地方使用。
v-model在不同input類型以及在其他元素上的使用
1.除了在以外，還能在input元素為其他類型上使用
1.1 在input元素 類型為radio上使用(單選框)
<div class="app">
<label>
男
<input type="radio" v-model="sex" value="male">
</label>
<label>
女
<input type="radio" v-model="sex" value="famale">
</label>
{{sex}}
</div>
//main.js
var app = new Vue({
el:'.app',
data:{
sex:'',
}
});
1.2在input元素 類型為checkbox上使用(復(fù)選框)
<div class="app">
你喜歡男的還女的：<br>
<label>
男
<input type="checkbox" v-model="sex" value="male">
</label>
<label>
女
<input type="checkbox" v-model="sex" value="famale">
</label><br>
{{sex}}
</div>
var app = new Vue({
el:'.app',
data:{
sex:['male'],
}
});
2. v-model在textarea中的使用(多行文本)
多行文本
其實(shí)多行文本，跟單行文本的使用沒有什么區(qū)別，只不過一個(gè)多行一個(gè)單行，使用是一樣的。
<div class="app"> <textarea v-model="article"></textarea> </div>
var app = new Vue({
el:'.app',
data:{
article:`has a lot of code。。。。。。。。。。。。。。。。。。。。`,
}
});
3. v-model在select中的使用(下拉列表)
3.1 單選下拉列表
<div class="app"> <div>where are you from？</div> <select v-model='from'> <option value="1">GUANGZHOU</option> <option value="2">BEIJING</option> </select> </div>
var app = new Vue({
el:'.app',
data:{
from:'1',
}
});
3.2 多選下拉列表
其實(shí)就是元素加個(gè)multiple屬性，表示多個(gè)，多選
<div class="app"> <div>where are you want to go？</div> <select v-model='from' multiple> <option value="1">GUANGZHOU</option> <option value="2">BEIJING</option> <option value="4">SHANGHAI</option> <option value="5">CHENGDU</option> </select> </div>
var app = new Vue({
el:'.app',
data:{
from:['1','2'],
}
});
總結(jié)
到此這篇關(guān)于v-model及其修飾符的文章就介紹到這了,更多相關(guān)v-model及其修飾符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3.0+echarts實(shí)現(xiàn)立體柱圖
這篇文章主要為大家詳細(xì)介紹了vue3.0+echarts實(shí)現(xiàn)立體柱圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
vue中實(shí)現(xiàn)Monaco Editor自定義提示功能
最近小編接到一個(gè)項(xiàng)目，需要在瀏覽器的ide中支持自定義提示功能，接下來通過本文給大家介紹在vue中實(shí)現(xiàn)Monaco Editor自定義提示功能,需要的朋友可以參考下2019-07-07
springboot+vue+對(duì)接支付寶接口+二維碼掃描支付功能（沙箱環(huán)境）
這篇文章主要介紹了springboot+vue+對(duì)接支付寶接口+二維碼掃描支付（沙箱環(huán)境）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了Vue一次性簡(jiǎn)潔明了引入所有公共組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹形菜單篩選過濾功能，需要的朋友可以參考下2022-04-04
vue3響應(yīng)式Object代理對(duì)象的讀取示例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對(duì)象的讀取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue自定義上傳頭像組件功能,介紹了與一般上傳組件的區(qū)別,通過實(shí)例代碼介紹了上傳圖片組件的方法,需要的朋友可以參考下2024-01-01
Vue利用dayjs封裝實(shí)現(xiàn)時(shí)間實(shí)時(shí)刷新
Day.js庫本身專注于簡(jiǎn)化JavaScript日期和時(shí)間的操作,它的API設(shè)計(jì)直觀,且功能強(qiáng)大,可以方便地格式化日期、添加或減去時(shí)間間隔、比較日期等,本文主要介紹了Vue利用dayjs封裝實(shí)現(xiàn)時(shí)間實(shí)時(shí)刷新,需要的朋友可以參考下2024-07-07
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03