一文輕松了解v-model及其修飾符
前言
用來(lái)綁定數(shù)據(jù)和元素value值,實(shí)現(xiàn)雙向綁定。
當(dāng)元素的值改變的時(shí)候,數(shù)據(jù)也改變,反過(guò)來(lái),當(dāng)數(shù)據(jù)發(fā)生改變,元素的值也改變。
在大部分情況下,所有用戶的輸入值都要通過(guò)v-model,一來(lái)好用,二來(lái)安全,而且功能也很強(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ò)誤。但在用戶輸入的過(guò)程中,不去打擾他。另外性能也有一點(diǎn)點(diǎn)的提高(不過(guò)很小,可以忽略不計(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à)錢(qián)等可以用數(shù)字來(lái)表示的類(lèi)型
<div class="app"> <input type="text" v-model.number="age"> {{age}} </div>
在通常情況下,如果沒(méi)有number,用戶輸入的是數(shù)字,但是也是字符串的數(shù)字。如果這里填了修飾符 v-model.number那么得到就是number類(lèi)型的數(shù)字了,不用再轉(zhuǎn)換了。
v-model除了能在input 的type為text輸入框中使用,還能在其他地方使用。
v-model在不同input類(lèi)型以及在其他元素上的使用
1.除了在以外,還能在input元素為其他類(lèi)型上使用
1.1 在input元素 類(lèi)型為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元素 類(lèi)型為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í)多行文本,跟單行文本的使用沒(méi)有什么區(qū)別,只不過(guò)一個(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)文章
vue 彈窗時(shí) 監(jiān)聽(tīng)手機(jī)返回鍵關(guān)閉彈窗功能(頁(yè)面不跳轉(zhuǎn))
這篇文章主要介紹了vue 彈窗時(shí) 監(jiān)聽(tīng)手機(jī)返回鍵關(guān)閉彈窗功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值(頁(yè)面不跳轉(zhuǎn)) ,需要的朋友可以參考下2019-05-05vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的方法
這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的操作方法,代碼分為html部分和css修改樣式代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法,通常我們使用組件的方式是,在實(shí)例化Vue對(duì)象之前,通過(guò)Vue.component方法來(lái)注冊(cè)全局的組件,文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2022-01-01vue前端通過(guò)騰訊接口獲取用戶ip的全過(guò)程
今天在寫(xiě)項(xiàng)目掉接口的時(shí)候有一個(gè)接口需要到了用戶的ip地址,查了半天覺(jué)得這個(gè)方法不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue前端通過(guò)騰訊接口獲取用戶ip的相關(guān)資料,需要的朋友可以參考下2022-12-12mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同,只是mpvue有一個(gè)坑,就是不能直接在new Vue的時(shí)候傳入store。本文分步驟給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-03-03解決vue-router 切換tab標(biāo)簽關(guān)閉時(shí)緩存問(wèn)題
這篇文章主要介紹了解決vue-router 切換tab標(biāo)簽關(guān)閉時(shí)緩存問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue中的局部過(guò)濾器和全局過(guò)濾器代碼實(shí)操
這篇文章主要分享的是vue中的局部過(guò)濾器和全局過(guò)濾器代碼實(shí)操,下面文章主要以代碼展現(xiàn),具有一的的知識(shí)參考性,需要的小伙伴可以參考一下2022-02-02