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