快捷導(dǎo)航

vue循環(huán)el-button實(shí)現(xiàn)點(diǎn)擊哪個(gè)按鈕,那個(gè)按鈕就變色

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

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

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

場景

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

實(shí)現(xiàn)

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

data里面

methods

效果

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

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

在Vue組件中定義一個(gè)selectedButton變量

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

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

使用v-for循環(huán)渲染10個(gè)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è)置選中時(shí)的背景色 */
  color: #ffffff; /* 設(shè)置選中時(shí)的文字顏色 */
  /* 可以根據(jù)需求設(shè)置其他樣式 */
}

這樣，當(dāng)點(diǎn)擊某個(gè)按鈕時(shí)，會將相應(yīng)的索引值賦給selectedButton變量，從而觸發(fā)樣式的改變，實(shí)現(xiàn)按鈕的選中效果。

如果是一個(gè)<Button>則：

/**1.添加一個(gè)自定義的類名，并設(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è)置其他樣式 */
}