vue3 改变el-button 选中的背景颜色 [vue3基础]

例如：改变选中某个el-button按钮的背景色
提示：选中某个按钮以后要求这个按钮是高亮的状态或者是其他背景颜色

例如：

学习内容：

提示：这里用到了active，通过激活按钮来使其生效

---

代码步骤：

提示：<el-button type="primary" v-for="(item, index) in xxxdata" :key="index" :class="{active: activeButtonIndex === index}" @click="changeClick(item, index)">xxx按钮</el-button>

例如：

• 首先定义activeButtonIndex为null
• 设置active 的样式
• 选中某个按钮后的样式呈现

---

最终结果：

提示：在点击按钮的时候 把index 传过去 ，把当前的index值赋值给activeButtonIndex。通过判断activeButtonIndex 是否等于 index 来决定按钮是否高亮显示。

赋值如：const changeClick = (item, index) => {
activeButtonIndex.value = index
}