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