Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式
Vue el 使用el-checkbox-group復(fù)選框進(jìn)行單選框
讓復(fù)選框進(jìn)行單選框操作
el-checkbox-group這個(gè)組件與其他復(fù)選框不一樣，我當(dāng)初也是半天不知道怎么操作
頁(yè)面使用v-model綁定 size就是等比例縮小放大，v-ror循環(huán)應(yīng)該看的懂。
重要的是@chage到我們寫(xiě)的類(lèi)
<el-checkbox-group v-model="checked" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city" @change="checkbox(city)">{{ city }}
</el-checkbox-button>
</el-checkbox-group>
注意checked與v-model綁定了所以必須要有值不然整個(gè)都顯示不出來(lái)，注意小細(xì)節(jié)
const cityOptions = ['上海', '北京', '廣州', '深圳'];
export default {
data () {
return {
checked: ['上海'],//不能為null，必須要有值
cities: cityOptions
};
}
}
經(jīng)過(guò)我的踩坑，不能直接this.checked=[]或者等于null。因?yàn)榻壎ㄖ蟮臄?shù)組里面有特定參數(shù)，也不能直接把this.checked=city
這就需要使用到“includes/包含”這個(gè)函數(shù)判斷包含不包含，再用三運(yùn)算符把當(dāng)前值給進(jìn)去
checkbox(city) {
this.checked = this.checked.includes(city) ? [city] : [];
},
題外話(huà)
三運(yùn)運(yùn)算符 ？問(wèn)號(hào)左邊的是判斷結(jié)果為true或false，只有？問(wèn)號(hào)左邊為布爾值才能跳到右邊，如果為true就按循序得第一個(gè)[city] 為false就第二個(gè)
三元運(yùn)算符 a ? b : c;
可以理解簡(jiǎn)化為
if(a){ a=b; }
else{ a=c }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實(shí)現(xiàn)雙向綁定的基本原理和代碼示例解析
Vue3中的響應(yīng)式系統(tǒng)由Proxy實(shí)現(xiàn),它取代了Vue2中的Object.defineProperty,提供了更強(qiáng)大的功能和更好的性能,下面給大家介紹Vue3實(shí)現(xiàn)雙向綁定的基本原理和代碼示例解析,感興趣的朋友一起看看吧2024-12-12
vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼
最近做了個(gè)項(xiàng)目需要做數(shù)字滾動(dòng)增加的效果，剛開(kāi)始接到這個(gè)項(xiàng)目還真是懵了，后來(lái)發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡(jiǎn)單的，下面小編給大家?guī)?lái)了vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼，需要的朋友參考下吧2018-07-07
vue.js前端網(wǎng)頁(yè)彈框異步行為示例分析
這篇文章主要為大家介紹了vue.js前端網(wǎng)頁(yè)彈框異步的行為示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助祝大家多多進(jìn)步，早日升職加薪2021-11-11
解決vue處理axios post請(qǐng)求傳參的問(wèn)題
下面小編就為大家分享一篇解決vue處理axios post請(qǐng)求傳參的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本篇文章主要介紹了Vue 2.0 服務(wù)端渲染入門(mén)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼
這篇文章主要介紹了Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
在vue中給后臺(tái)接口傳的值為數(shù)組的格式代碼
這篇文章主要介紹了在vue中給后臺(tái)接口傳的值為數(shù)組的格式代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
平時(shí)寫(xiě)vue的時(shí)候知道 props 有很多種用法，今天我們來(lái)看看vue內(nèi)部是怎么處理 props 中那么多的用法的。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
Vue.js的Mixins功能允許封裝可復(fù)用的組件選項(xiàng),實(shí)現(xiàn)代碼復(fù)用和模塊化,Mixins可以包含數(shù)據(jù)、方法、生命周期鉤子等組件選項(xiàng),使用時(shí),Mixins中的選項(xiàng)會(huì)被混入組件中,優(yōu)先級(jí)低于組件自身選項(xiàng),優(yōu)點(diǎn)包括代碼復(fù)用、高靈活性和簡(jiǎn)單易用2024-09-09
Vue2 使用 Echarts 創(chuàng)建圖表實(shí)例代碼
本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05