可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
v-model是什么
v-model 是Vue框架的一種內(nèi)置的API指令，本質(zhì)是一種語法糖寫法。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。
為什么使用v-model？
v-model指令可以在表單 input、textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件來更新數(shù)據(jù)，并在某種極端場景下進(jìn)行一些特殊處理；
什么場景下會使用v-model？
表單提交是開發(fā)中非常常見的功能，也是和用戶交互的重要手段：比如用戶在登錄、注冊時(shí)需要提交賬號密碼；比如用戶在檢索、創(chuàng)建、更新信息時(shí)，需要提交一些數(shù)據(jù)； 這些都要求我們可以在代碼邏輯中獲取到用戶提交的數(shù)據(jù)，我們通常會使用v-model指令來完成
示例：v-model的基本使用
v-model的原理
官方有說到，v-model的原理其實(shí)是背后有兩個(gè)操作：
- 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)]有明確表示這點(diǎn)，但我們可以捋一捋兩者的關(guān)系。
什么是單項(xiàng)數(shù)據(jù)流？
父組件可以向子組件傳遞數(shù)據(jù),并且改變子組件的值,而子組件不能改變父組件傳遞給它的 prop 屬性，官方推薦的做法是它拋出事件，通知父組件自行改變綁定的值。
v-model 的做法是怎樣的？
v-model 做法完全符合單項(xiàng)數(shù)據(jù)流。甚至于，它給出了一種在命名和事件定義上的規(guī)范。 眾所周知 .sync 修飾符是單向數(shù)據(jù)流的另一個(gè)典型范式。
單向數(shù)據(jù)流：總結(jié)起來其實(shí)也就8個(gè)字：數(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：單個(gè)勾選框和多個(gè)勾選框
- 單個(gè)勾選框：v-model即為布爾值。此時(shí)input的value并不影響v-model的值。
- 多個(gè)復(fù)選框：當(dāng)是多個(gè)復(fù)選框時(shí)，因?yàn)榭梢赃x中多個(gè)，所以對應(yīng)的data中屬性是一個(gè)數(shù)組。當(dāng)選中某一個(gè)時(shí)，就會將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，用于選擇其中一項(xiàng)；
<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也分單選和多選兩種情況。
- 單選：只能選中一個(gè)值，v-model綁定的是一個(gè)值。當(dāng)我們選中option中的一個(gè)時(shí)，會將它對應(yīng)的value賦值到fruit中；
- 多選：可以選中多個(gè)值，v-model綁定的是一個(gè)數(shù)組。當(dāng)選中多個(gè)值時(shí)，就會將選中的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的兩個(gè)輸入框值male、female；比如hobbies的三個(gè)輸入框值basketball、football、tennis. 在真實(shí)開發(fā)中，我們的數(shù)據(jù)可能是來自服務(wù)器的，那么我們就可以先將值請求下來，綁定到data返回的對象中，再通過v-bind來進(jìn)行值的綁定，這個(gè)過程就是值綁定。這里不再給出具體的做法，因?yàn)檫€是v-bind的使用過程。
v-model修飾符 - lazy
lazy修飾符是什么作用呢？
默認(rèn)情況下，v-model在進(jìn)行雙向綁定時(shí)，綁定的是input事件，那么會在每次內(nèi)容輸入后就將最新的值和綁定的屬性進(jìn)行同步；，如果我們在v-model后跟上lazy修飾符，那么會將綁定的事件切換為 change 事件，只有在提交時(shí)（比如回車）才會觸發(fā)
<!-- 修飾符 lazy/number/trim -->
<!-- lazy 失去焦點(diǎn)后才改變點(diǎn)擊enter-->
<!-- 口默認(rèn)情況下, V- model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)的?？谝簿褪钦f, - -旦有數(shù)據(jù)發(fā)生改變對應(yīng)的data中的數(shù)據(jù)就會自動發(fā)生 改變?？趌azy修飾符可以讓數(shù)據(jù)在失去焦點(diǎn)或者回車時(shí)才會更新:-->
<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修飾符：
另外，在我們進(jìn)行邏輯判斷時(shí)，如果是一個(gè)string類型，在可以轉(zhuǎn)化的情況下會進(jìn)行隱式轉(zhuǎn)換的： 下面的score在進(jìn)行判斷的過程中會進(jìn)行隱式轉(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)容時(shí)，因?yàn)閕nput中的v-model綁定了message ,所以會實(shí)時(shí)將輸入的內(nèi)容傳遞給message ,
message發(fā)生改變。內(nèi)容傳遞給message , message發(fā)生改變。message的值插入到DOM中,所以DOM會發(fā)生響應(yīng)的改變。0所以,通過v-model實(shí)現(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 失去焦點(diǎn)后才改變點(diǎn)擊enter-->
<!-- 口默認(rèn)情況下, V- model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)的。口也就是說, - -旦有數(shù)據(jù)發(fā)生改變對應(yīng)的data中的數(shù)據(jù)就會自動發(fā)生 改變。口lazy修飾符可以讓數(shù)據(jù)在失去焦點(diǎn)或者回車時(shí)才會更新:-->
<input type="text" v-model.lazy="message">
<br> {{message}}
<br>
<!-- number 轉(zhuǎn)化為數(shù)字類型-->
<!-- 默認(rèn)情況下,在輸入框中無論我們輸入的是字母還是數(shù)字,都會被 當(dāng)做字符串類型進(jìn)行處理?？诘侨绻覀僝希望處理的是數(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)要 默認(rèn)選中時(shí)要填入值即可 例：sex='男'
agree: false,
sport: [],
fruits: '',
fruits2: [],
hobbies: [],
origintobbies: ["籃球", "足球", "乒乓球", "羽毛球", "桌球"],
age: 0,
name: ''
},
})
</script>
</body>
</html>總結(jié)
到此這篇關(guān)于vue v-model最詳細(xì)講解的文章就介紹到這了,更多相關(guān)v-model詳細(xì)講解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了關(guān)于表單組件el-form中的prop的作用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue計(jì)算屬性computed與方法methods的區(qū)別及說明
這篇文章主要介紹了Vue計(jì)算屬性computed與方法methods的區(qū)別及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
BEM是一種前端命名方法論,主要是針對CSS,意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫,這種命名方法讓CSS便于統(tǒng)一團(tuán)隊(duì)開發(fā)規(guī)范和方便維護(hù),本文給大家介紹了Vue3配置bem樣式架構(gòu),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了解決Vue?input輸入框卡死的問題,文中同時(shí)給大家提到了Vue-element中el-input輸入卡頓問題及解決方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過實(shí)例介紹Vue3 provide和inject的相關(guān)知識,感興趣的朋友一起看看吧2023-11-11
看到好多開源項(xiàng)目都升級了vue3,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目升級到Vue3的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
vue3整合SpringSecurity加JWT實(shí)現(xiàn)登錄認(rèn)證
本文主要介紹了vue3整合SpringSecurity加JWT實(shí)現(xiàn)登錄認(rèn)證,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
最近聽到有人提到了Vue2的functional組件,大致上是說這個(gè)東西沒有生命周期,在渲染層面上,會減少很多的消耗,一番處理之后,首屏?xí)r間和內(nèi)存都能減少不少,所以本文小編就來和大家聊聊Vue2中的functional組件<BR>2023-08-08
這篇文章交詳細(xì)的給大家介紹了vue組件中slot的用法，主要是讓組件的可擴(kuò)展性更強(qiáng)，具體內(nèi)容詳情大家參考下本文2018-01-01