一文輕松了解v-model及其修飾符
前言
用來綁定數(shù)據(jù)和元素value值，實現(xiàn)雙向綁定。
當元素的值改變的時候，數(shù)據(jù)也改變，反過來，當數(shù)據(jù)發(fā)生改變，元素的值也改變。
在大部分情況下，所有用戶的輸入值都要通過v-model,一來好用，二來安全，而且功能也很強大。
<div class="app">
<input type="text" v-model="name">
{{name}}
</div>
var app = new Vue({
el:'.app',
data:{
name:'Alice'
}
});
v-model的修飾符：
lazy
懶惰，表示惰性更新，不會立馬更新。
事實上它是觸發(fā)了一個change事件。
好處：當用戶輸入完了才綁定，才會顯示表單驗證的結果，不管正確還是錯誤。但在用戶輸入的過程中，不去打擾他。另外性能也有一點點的提高（不過很小，可以忽略不計）
<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
一般用于年齡、價錢等可以用數(shù)字來表示的類型
<div class="app">
<input type="text" v-model.number="age">
{{age}}
</div>
在通常情況下，如果沒有number，用戶輸入的是數(shù)字，但是也是字符串的數(shù)字。如果這里填了修飾符 v-model.number那么得到就是number類型的數(shù)字了，不用再轉換了。
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上使用(復選框)
<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中的使用(多行文本)
多行文本
其實多行文本，跟單行文本的使用沒有什么區(qū)別，只不過一個多行一個單行，使用是一樣的。
<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 多選下拉列表
其實就是元素加個multiple屬性，表示多個，多選
<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'],
}
});
總結
到此這篇關于v-model及其修飾符的文章就介紹到這了,更多相關v-model及其修飾符內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue 彈窗時 監(jiān)聽手機返回鍵關閉彈窗功能(頁面不跳轉)
這篇文章主要介紹了vue 彈窗時 監(jiān)聽手機返回鍵關閉彈窗功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值(頁面不跳轉) ,需要的朋友可以參考下2019-05-05
vue2?自定義?el-radio-button?的樣式并設置默認值的方法
這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設置默認值的操作方法，代碼分為html部分和css修改樣式代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法，通常我們使用組件的方式是，在實例化Vue對象之前，通過Vue.component方法來注冊全局的組件,文中通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2022-01-01
這篇文章主要介紹了vue 解決IOS10低版本白屏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
今天在寫項目掉接口的時候有一個接口需要到了用戶的ip地址,查了半天覺得這個方法不錯,下面這篇文章主要給大家介紹了關于vue前端通過騰訊接口獲取用戶ip的相關資料,需要的朋友可以參考下2022-12-12
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了解決vue-router 切換tab標簽關閉時緩存問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了基于vue2實現(xiàn)左滑刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要分享的是vue中的局部過濾器和全局過濾器代碼實操，下面文章主要以代碼展現(xiàn)，具有一的的知識參考性，需要的小伙伴可以參考一下2022-02-02
本篇文章主要介紹了詳解axios在vue中的簡單配置與使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05