淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
vue.js為開發(fā)者提供了很多便利的指令,其中v-model用于表單的數(shù)據(jù)綁定很常見,
下面是最常見的例子:
<div id='myApp'> <input type="text" v-model="msg"><br> {{msg}} </div>
js里data初始化數(shù)據(jù)
<script src="./js/vue.js"></script> <script type="text/javascript"> new Vue({ el: "#myApp", data() { return { msg:'hello' } },
瀏覽器渲染:
上面可知,v-model對(duì)應(yīng)的數(shù)據(jù)為input的value屬性
但是如果是checkbox,會(huì)有一點(diǎn)問題
<div id='myApp'> <input type="checkbox" v-model="msg"><br> {{msg}} </div>
沒有給checkbox設(shè)置value屬性
js中data為'':
new Vue({ el: "#myApp", data() { return { msg:'' } },
瀏覽器渲染:
勾選為true,取消勾選為false
且data中msg如果初始化為true,則checkbox默認(rèn)選中
到這里讓人會(huì)有在checkbox里,v-model對(duì)應(yīng)的值為true或false,似乎和checked屬性有關(guān)
是不是這樣呢,我們?cè)賮砜匆粋€(gè)例子:
<div id='myApp'> <input type="checkbox" v-model="msg" value="angular">angular<br> <input type="checkbox" v-model="msg" value="react">react<br> <input type="checkbox" v-model="msg" value="vue">vue<br> {{msg}} </div>
我們?cè)O(shè)置三個(gè)checkbox,分別設(shè)置value屬性
js中依然
new Vue({ el: "#myApp", data() { return { msg:'' } },
瀏覽器:
可以看到有了value屬性,v-model 對(duì)應(yīng)的msg 依然是true或false;
那么之前的猜想難道是正確的嗎?
我們來改一點(diǎn)代碼,通常v-model對(duì)應(yīng)的都是字符串,這次我們初始化為空數(shù)組[]
data() { return { msg:[] } },
其他的不變,依然是上面三個(gè)checkbox
神奇的一幕出來了
瀏覽器中:
可以看到,選中誰,誰的value就會(huì)添加到數(shù)組里,
且數(shù)據(jù)是雙向綁定的,所以,當(dāng)我們初始化數(shù)據(jù)的數(shù)組里賦予上面的value值時(shí),所對(duì)應(yīng)的checkbox便會(huì)默認(rèn)選中
data() { return { msg:['vue'] } },
瀏覽器渲染:
所以可以看到,checkbox里v-model對(duì)應(yīng)的值依然是value,但是之前為什么是true或false?
我自己在網(wǎng)上找了很久,沒有發(fā)現(xiàn)一個(gè)特別清楚的解釋,所以在這里發(fā)表一下自己的理解:
1.checkbox和普通input一樣,點(diǎn)擊勾選其實(shí)就是輸入value,而輸入value會(huì)改變checked屬性,所以會(huì)選中 當(dāng)v-model對(duì)應(yīng)“字符串”時(shí)會(huì)解析“字符串”為布爾值,v-model對(duì)應(yīng)有值或是true,checkbox都會(huì)選中。
2.當(dāng)v-model對(duì)應(yīng)“數(shù)組”時(shí)有勾表示已選中,相當(dāng)于賦值給,相當(dāng)于有value,v-model對(duì)應(yīng)value, 沒有value屬性時(shí),點(diǎn)勾相當(dāng)于將('null')賦值給value——>v-model('null'為字符串), 有value屬性時(shí),點(diǎn)勾相當(dāng)于將(value)賦值給value——>v-model, 注意數(shù)據(jù)是雙向綁定的,所以數(shù)組里的值對(duì)應(yīng)著checkbox的value——>v-model。
3.處理表單,v-model一般都是對(duì)應(yīng)字符串,所以處理checkbox的v-model,善用對(duì)應(yīng)布爾值控制勾選。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決VUE打包后與nginx代理出現(xiàn)加載速度超級(jí)慢的問題
這篇文章主要介紹了解決VUE打包后與nginx代理出現(xiàn)加載速度超級(jí)慢的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來和大家探討一下,Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎,本文將圍繞此問題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的,感興趣的小伙伴可以了解一下2023-08-08element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)
這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08基于Vue2的移動(dòng)端開發(fā)環(huán)境搭建詳解
這篇文章主要給大家介紹的是基于Vue2的移動(dòng)端環(huán)境搭建,移動(dòng)端大家更多想到的是響應(yīng)布局,我們根據(jù)不同大小的屏幕進(jìn)行適配,當(dāng)然少不了我們的重頭戲rem,移動(dòng)端相比pc端就沒什么特別的了。我會(huì)一步一步帶領(lǐng)大家進(jìn)入Vue2的世界,感興趣的朋友下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11vue中的base64圖片轉(zhuǎn)網(wǎng)絡(luò)URL方式
在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過JavaScript的URL.createObjectURL()方法將Base64轉(zhuǎn)換為Blob URL,進(jìn)而轉(zhuǎn)換為File對(duì)象,并可進(jìn)一步轉(zhuǎn)換為PNG或其他格式的圖片,這種轉(zhuǎn)換技術(shù)在前端開發(fā)中非常實(shí)用2024-10-10