可能是全網(wǎng)vue?v-model最詳細講解教程
v-model是什么
v-model 是Vue框架的一種內(nèi)置的API指令，本質(zhì)是一種語法糖寫法。它負責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進行一些特殊處理。
為什么使用v-model？
v-model指令可以在表單 input、textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖，它負責(zé)監(jiān)聽用戶的輸入事件來更新數(shù)據(jù)，并在某種極端場景下進行一些特殊處理；
什么場景下會使用v-model？
表單提交是開發(fā)中非常常見的功能，也是和用戶交互的重要手段：比如用戶在登錄、注冊時需要提交賬號密碼；比如用戶在檢索、創(chuàng)建、更新信息時，需要提交一些數(shù)據(jù)； 這些都要求我們可以在代碼邏輯中獲取到用戶提交的數(shù)據(jù)，我們通常會使用v-model指令來完成
示例：v-model的基本使用
v-model的原理
官方有說到，v-model的原理其實是背后有兩個操作：
- v-bind綁定value屬性的值；
- v-on綁定input事件監(jiān)聽到函數(shù)中，函數(shù)會獲取最新的值賦值到綁定的屬性中；
那v-model是雙向綁定嗎？
是的你可以用 v-model 指令在表單
<input>、<textarea>及<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定。—— vue2官方文檔
那 v-model 是單向數(shù)據(jù)流嗎？
是的，雖然官方?jīng)]有明確表示這點，但我們可以捋一捋兩者的關(guān)系。
什么是單項數(shù)據(jù)流？
父組件可以向子組件傳遞數(shù)據(jù),并且改變子組件的值,而子組件不能改變父組件傳遞給它的 prop 屬性，官方推薦的做法是它拋出事件，通知父組件自行改變綁定的值。
v-model 的做法是怎樣的？
v-model 做法完全符合單項數(shù)據(jù)流。甚至于，它給出了一種在命名和事件定義上的規(guī)范。 眾所周知 .sync 修飾符是單向數(shù)據(jù)流的另一個典型范式。
單向數(shù)據(jù)流：總結(jié)起來其實也就8個字：數(shù)據(jù)向下，事件向上。
那接下來，我們再來看一下v-model是如何綁定一下其他的表單類型：textarea、checkbox、radio、select等屬性的
v-model的綁定
我們來看一下綁定textarea
<div class="demo">
<textarea v-model="article" cols="30" rows="10"> </textarea>
<h2>article當(dāng)前的值是：{{ article }}</h2>
</div>export default {
name: 'textarea',
data () {
return {
article: "a"
}
}
}效果：
v-model綁定checkbox
我們來看一下v-model綁定checkbox：單個勾選框和多個勾選框
- 單個勾選框：v-model即為布爾值。此時input的value并不影響v-model的值。
- 多個復(fù)選框：當(dāng)是多個復(fù)選框時，因為可以選中多個，所以對應(yīng)的data中屬性是一個數(shù)組。當(dāng)選中某一個時，就會將input的value添加到數(shù)組中。
單選框示例：
export default {
name: 'checkbox',
data () {
return {
isAgree: "true"
}
}
}效果：
<!-- 一般對應(yīng)數(shù)組類型 -->
<input type="checkbox" v-model="sport" value="籃球" />籃球
<input type="checkbox" v-model="sport" value="足球" />足球
<input type="checkbox" v-model="sport" value="羽毛球球" />羽毛球球
<input type="checkbox" v-model="sport" value="兵乓球" />兵乓球
您的愛好有：{{ sport }}export default {
name: 'demo',
data () {
return {
sport: [],
}
}
}效果示例：
v-model綁定radio
v-model綁定radio，用于選擇其中一項；
<label for="man">
<input type="radio" value="男" v-model='sex' id="man">男
</label>
<label for="girl">
<input type="radio" value="女" v-model='sex' id="girl">女
</label> 您選中的是：{{sex}}export default {
name: 'demo',
data () {
return {
sex: '',
}
}
}效果示例：
v-model綁定select
和checkbox一樣，select也分單選和多選兩種情況。
- 單選：只能選中一個值，v-model綁定的是一個值。當(dāng)我們選中option中的一個時，會將它對應(yīng)的value賦值到fruit中；
- 多選：可以選中多個值，v-model綁定的是一個數(shù)組。當(dāng)選中多個值時，就會將選中的option對應(yīng)的value添加到數(shù)組fruit中；
<select name="abc" v-model="fruits2" multiple>
<option value="香蕉">香蕉</option>
<option value="蘋果">蘋果</option>
<option value="橙子">橙子</option>
<option value="榴蓮">榴蓮</option>
</select>export default {
name: 'demo',
data () {
return {
fruits2: [],
}
}
}效果示例：
<select name="abc" v-model="fruits2" multiple size="3>
<option value="香蕉">香蕉</option>
<option value="蘋果">蘋果</option>
<option value="橙子">橙子</option>
<option value="榴蓮">榴蓮</option>
</select>效果示例：
v-model的值綁定
目前我們在前面的案例中大部分的值都是在template中固定好的：比如gender的兩個輸入框值male、female；比如hobbies的三個輸入框值basketball、football、tennis. 在真實開發(fā)中，我們的數(shù)據(jù)可能是來自服務(wù)器的，那么我們就可以先將值請求下來，綁定到data返回的對象中，再通過v-bind來進行值的綁定，這個過程就是值綁定。這里不再給出具體的做法，因為還是v-bind的使用過程。
v-model修飾符 - lazy
lazy修飾符是什么作用呢？
默認情況下，v-model在進行雙向綁定時，綁定的是input事件，那么會在每次內(nèi)容輸入后就將最新的值和綁定的屬性進行同步；，如果我們在v-model后跟上lazy修飾符，那么會將綁定的事件切換為 change 事件，只有在提交時（比如回車）才會觸發(fā)
<!-- 修飾符 lazy/number/trim -->
<!-- lazy 失去焦點后才改變點擊enter-->
<!-- 口默認情況下, V- model默認是在input事件中同步輸入框的數(shù)據(jù)的?？谝簿褪钦f, - -旦有數(shù)據(jù)發(fā)生改變對應(yīng)的data中的數(shù)據(jù)就會自動發(fā)生 改變?？趌azy修飾符可以讓數(shù)據(jù)在失去焦點或者回車時才會更新:-->
<input type="text" v-model.lazy="message" />
<br />
{{ message }}export default {
name: 'demo',
data () {
return {
message: "內(nèi)容",
}
}
}效果示例：
v-model修飾符 - number
我們先來看一下v-model綁定后的值是什么類型的：message總是string類型，即使在我們設(shè)置type為number也是string類型；
如果我們希望轉(zhuǎn)換為數(shù)字類型，那么可以使用 .number修飾符：
另外，在我們進行邏輯判斷時，如果是一個string類型，在可以轉(zhuǎn)化的情況下會進行隱式轉(zhuǎn)換的： 下面的score在進行判斷的過程中會進行隱式轉(zhuǎn)化的
效果示例：
v-model修飾符 - trim
如果要自動過濾用戶輸入的守衛(wèi)空白字符，可以給v-model添加 trim修飾符
效果示例：
碼上掘金代碼片段
全部示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 表單綁定v-model的雙向綁定
當(dāng)我們在輸入框輸入內(nèi)容時，因為input中的v-model綁定了message ,所以會實時將輸入的內(nèi)容傳遞給message ,
message發(fā)生改變。內(nèi)容傳遞給message , message發(fā)生改變。message的值插入到DOM中,所以DOM會發(fā)生響應(yīng)的改變。0所以,通過v-model實現(xiàn)了雙向的綁定。-->
<input type="text" v-model="message"> {{message}}
<br>
<!-- v-model和radio的結(jié)合使用 -->
<label for="man">
<input type="radio" value="男" v-model='sex' id="man">男
</label>
<label for="girl">
<input type="radio" value="女" v-model='sex' id="girl">女
</label> 您選中的是：{{sex}}
<br>
<!-- 復(fù)選框 一般對應(yīng)布爾類型-->
<label for="agree">
<input type="checkbox" id="agree" v-model="agree">同意
</label>
<button :disabled="!agree">下一步</button> 您的選擇：{{agree}}
<br>
<!-- 一般對應(yīng)數(shù)組類型 -->
<input type="checkbox" v-model="sport" value="籃球">籃球
<input type="checkbox" v-model="sport" value="足球">足球
<input type="checkbox" v-model="sport" value="羽毛球球">羽毛球球
<input type="checkbox" v-model="sport" value="兵乓球">兵乓球 您的愛好有：{{sport}}
<br>
<!-- select 單選-->
<select name="abc" v-model='fruits'>
<option value="香蕉">香蕉</option>
<option value="蘋果">蘋果</option>
<option value="橙子">橙子</option>
<option value="榴蓮">榴蓮</option>
</select> 您選中的水果是{{fruits}}
<br>
<br>
<!-- 多選 -->
<select name="abc" v-model="fruits2" multiple>
<option value="香蕉">香蕉</option>
<option value="蘋果">蘋果</option>
<option value="橙子">橙子</option>
<option value="榴蓮">榴蓮</option>
</select>
<br> 您選中的水果是{{fruits2}}
<br>
<!-- 值綁定 -->
<label v-for="item in origintobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
<br> 您的愛好是{{hobbies}}
<br>
<!-- 修飾符 lazy/number/trim -->
<!-- lazy 失去焦點后才改變點擊enter-->
<!-- 口默認情況下, V- model默認是在input事件中同步輸入框的數(shù)據(jù)的?？谝簿褪钦f, - -旦有數(shù)據(jù)發(fā)生改變對應(yīng)的data中的數(shù)據(jù)就會自動發(fā)生 改變。口lazy修飾符可以讓數(shù)據(jù)在失去焦點或者回車時才會更新:-->
<input type="text" v-model.lazy="message">
<br> {{message}}
<br>
<!-- number 轉(zhuǎn)化為數(shù)字類型-->
<!-- 默認情況下,在輸入框中無論我們輸入的是字母還是數(shù)字,都會被 當(dāng)做字符串類型進行處理?？诘侨绻覀僝希望處理的是數(shù)字類型,那么最好直接將內(nèi)容當(dāng)做數(shù)字處理。o number修飾符可以讓在輸入框中輸入的內(nèi)容自動轉(zhuǎn)成數(shù)字類型:-->
<input type="text" v-model.number="age">
<br> {{age}}--{{typeof age}}
<br>
<!-- trim 去除空格 -->
<!-- trim修飾符可以過濾內(nèi)容左右兩邊的空格 -->
<input type="text " v-model.trim="name">
<br> {{name}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "內(nèi)容",
sex: '',
// 當(dāng)要 默認選中時要填入值即可 例：sex='男'
agree: false,
sport: [],
fruits: '',
fruits2: [],
hobbies: [],
origintobbies: ["籃球", "足球", "乒乓球", "羽毛球", "桌球"],
age: 0,
name: ''
},
})
</script>
</body>
</html>總結(jié)
到此這篇關(guān)于vue v-model最詳細講解的文章就介紹到這了,更多相關(guān)v-model詳細講解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何解決npm i下載依賴的時候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時候出現(xiàn)某依賴版本沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Electron-vue開發(fā)的客戶端支付收款工具的實現(xiàn)
這篇文章主要介紹了Electron-vue開發(fā)的客戶端支付收款工具的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vuex中store存儲store.commit和store.dispatch的區(qū)別及說明
這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue是一個單頁面的應(yīng)用,這導(dǎo)致一些爬蟲和百度無法搜索到,如果你想針對你應(yīng)用的其中某些頁面進行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進行預(yù)渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁面應(yīng)用做預(yù)渲染的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊和使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue中?根據(jù)判斷條件添加一個或多個style及class的寫法小結(jié)
這篇文章主要介紹了vue中?根據(jù)判斷條件添加一個或多個style及class的寫法,文中給大家補充介紹了關(guān)于vue里:class的使用結(jié)合自己的實現(xiàn)給大家講解，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
今天小編就為大家分享一篇解決vue的過渡動畫無法正常實現(xiàn)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue實現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果實例代碼
本文通過一段簡單的代碼給大家介紹了基于純vue實現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果，代碼很簡單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
vue使用element寫東西讓我感覺到了特別的方便,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue+Element做個小頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03