vue循環(huán)el-button實(shí)現(xiàn)點(diǎn)擊哪個(gè)按鈕,那個(gè)按鈕就變色
vue循環(huán)el-button,點(diǎn)擊哪個(gè)按鈕,那個(gè)按鈕變色
場(chǎng)景
有多個(gè)按鈕，一個(gè)個(gè)的寫(xiě)并且一個(gè)個(gè)綁定事件代碼很冗余，所以就循環(huán)，綁定一個(gè)事件，傳不同的參數(shù)即可
實(shí)現(xiàn)
我這里有兩種button，由于一些原因，“全部”按鈕沒(méi)有放在循環(huán)里面
data里面
methods
效果
循環(huán)多個(gè)＜el-button＞ 如何設(shè)置某一個(gè)選中
如果您想在一個(gè)循環(huán)中的多個(gè)el-button中選擇一個(gè)按鈕并將其設(shè)置為選中狀態(tài)，可以使用一個(gè)變量來(lái)標(biāo)識(shí)選中的按鈕索引。以下是一種實(shí)現(xiàn)方式：
在Vue組件中定義一個(gè)selectedButton變量
用于存儲(chǔ)選中按鈕的索引值：
data() {
return {
selectedButton: -1 // -1 表示沒(méi)有選中的按鈕
}
}使用v-for循環(huán)渲染10個(gè)el-button
并根據(jù)selectedButton變量來(lái)設(shè)置選中狀態(tài)：
<el-button v-for="(item, index) in 10" :key="index" :class="{'selected': selectedButton === index}" @click="selectedButton = index">按鈕 {{ index }}</el-button>在CSS中定義選中狀態(tài)的樣式
.selected {
background-color: #00ff00; /* 設(shè)置選中時(shí)的背景色 */
color: #ffffff; /* 設(shè)置選中時(shí)的文字顏色 */
/* 可以根據(jù)需求設(shè)置其他樣式 */
}這樣，當(dāng)點(diǎn)擊某個(gè)按鈕時(shí)，會(huì)將相應(yīng)的索引值賦給selectedButton變量，從而觸發(fā)樣式的改變，實(shí)現(xiàn)按鈕的選中效果。
如果是一個(gè)<Button>則：
/**1.添加一個(gè)自定義的類(lèi)名，并設(shè)置選中時(shí)的樣式：**/
<el-button :class="{'selected': isSelected}" @click="isSelected = !isSelected">按鈕</el-button>
/**2. 在CSS中定義選中狀態(tài)的樣式：**/
data() {
return {
isSelected: false
}
}
/**3. 在Vue組件中定義isSelected變量，并初始化為false：**/
.selected {
background-color: #00ff00; /* 設(shè)置選中時(shí)的背景色 */
color: #ffffff; /* 設(shè)置選中時(shí)的文字顏色 */
/* 可以根據(jù)需求設(shè)置其他樣式 */
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Vite實(shí)現(xiàn)根據(jù)用戶(hù)權(quán)限的動(dòng)態(tài)路由
在現(xiàn)代前端開(kāi)發(fā)中,單頁(yè)面應(yīng)用（SPA）越來(lái)越受到開(kāi)發(fā)者的青睞,而 Vue.js 作為其中的一個(gè)流行框架,提供了豐富的功能來(lái)構(gòu)建用戶(hù)界面,本文將通過(guò)一個(gè)基于 Vite + Vue 3 的項(xiàng)目示例,詳細(xì)介紹如何實(shí)現(xiàn)動(dòng)態(tài)路由,有需要的可以參考下2025-10-10
vue2中provide/inject的使用與響應(yīng)式傳值詳解
Vue中 Provide/Inject實(shí)現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue項(xiàng)目配置使用flow類(lèi)型檢查的步驟
這篇文章主要介紹了vue項(xiàng)目配置使用flow類(lèi)型檢查的步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
本文主要介紹了詳解vue中父子參數(shù)傳遞雙向的方式不同,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
本文介紹了五種刷新Vue當(dāng)前組件的方法：使用location.reload()、路由刷新、v-if或key屬性、beforeRouteUpdate導(dǎo)航守衛(wèi)以及$forceUpdate,每種方法都有其適用場(chǎng)景和優(yōu)缺點(diǎn),需要的朋友可以參考下2025-02-02
Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐記錄
無(wú)論單頁(yè)還是多頁(yè)，我的實(shí)現(xiàn)思路是總體配置404頁(yè)面的思路就是在前端路由表中添加一個(gè) path: '/404' 的路由，渲染相應(yīng)的404頁(yè)面。這篇文章主要介紹了Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐,需要的朋友可以參考下2018-05-05
vue19 組建 Vue.extend component、組件模版、動(dòng)態(tài)組件 的實(shí)例代碼
這篇文章主要介紹了vue19 組建 Vue.extend component、組件模版、動(dòng)態(tài)組件 的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
Vue2.0 給Tab標(biāo)簽頁(yè)和頁(yè)面切換過(guò)渡添加樣式的方法
下面小編就為大家分享一篇Vue2.0 給Tab標(biāo)簽頁(yè)和頁(yè)面切換過(guò)渡添加樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
el-date-picker選中獲取值實(shí)現(xiàn)方式
在ElementUI中使用el-date-picker組件獲取用戶(hù)選中的日期值,可以通過(guò)v-model雙向數(shù)據(jù)綁定或者監(jiān)聽(tīng)change事件來(lái)實(shí)現(xiàn),需要注意的是,ElementUI可能不支持Vue3,需要使用ElementPlus或其他兼容Vue3的UI庫(kù)2025-11-11
混入 (mixin) 提供了一種非常靈活的方式,來(lái)分發(fā) Vue 組件中的可復(fù)用功能,下面就跟隨小編一起來(lái)了解一下Vue中混入mixin的實(shí)現(xiàn)吧2024-11-11