vue循環(huán)el-button實現點擊哪個按鈕,那個按鈕就變色

更新時間：2023年10月16日 14:40:06 作者：別搞花里胡哨的

這篇文章主要介紹了vue循環(huán)el-button實現點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue循環(huán)el-button,點擊哪個按鈕,那個按鈕變色

場景

有多個按鈕，一個個的寫并且一個個綁定事件代碼很冗余，所以就循環(huán)，綁定一個事件，傳不同的參數即可

實現

我這里有兩種button，由于一些原因，“全部”按鈕沒有放在循環(huán)里面

data里面

methods

效果

循環(huán)多個＜el-button＞如何設置某一個選中

如果您想在一個循環(huán)中的多個el-button中選擇一個按鈕并將其設置為選中狀態(tài)，可以使用一個變量來標識選中的按鈕索引。以下是一種實現方式：

在Vue組件中定義一個selectedButton變量

用于存儲選中按鈕的索引值：

data() {
  return {
    selectedButton: -1 // -1 表示沒有選中的按鈕
  }
}

使用v-for循環(huán)渲染10個el-button

并根據selectedButton變量來設置選中狀態(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; /* 設置選中時的背景色 */
  color: #ffffff; /* 設置選中時的文字顏色 */
  /* 可以根據需求設置其他樣式 */
}

這樣，當點擊某個按鈕時，會將相應的索引值賦給selectedButton變量，從而觸發(fā)樣式的改變，實現按鈕的選中效果。

如果是一個<Button>則：

/**1.添加一個自定義的類名，并設置選中時的樣式：**/
<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; /* 設置選中時的背景色 */
  color: #ffffff; /* 設置選中時的文字顏色 */
  /* 可以根據需求設置其他樣式 */
}