Element UI 按钮组件绑定 activeBtnIndex 实现选中状态

<template>
  <div>
    <el-button type='全部' :class='{active: activeBtnIndex===0}' @click='handleClick(0)'>全部</el-button>
    <el-button type='未完成' :class='{active: activeBtnIndex===1}' @click='handleClick(1)'>未完成</el-button>
    <el-button type='已完成' :class='{active: activeBtnIndex===2}' @click='handleClick(2)'>已完成</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeBtnIndex: 0
    }
  },
  methods: {
    handleClick(index) {
      this.activeBtnIndex = index
    }
  }
}
</script>
<p>在每个按钮上绑定的 click 事件会调用 handleClick 方法，传入对应的 index 值，从而改变 activeBtnIndex 的值。同时，使用 :class 绑定样式，当 activeBtnIndex 等于对应的 index 值时，该按钮会添加一个名为 active 的类，实现选中状态的样式变化。</p>