Vue 组件：可切换状态的按钮组 - 全部、已完成、待完成

<template>
<div class='button-container mt-3'>
  <div class='btn-group' role='group' aria-label='Basic example'>
    <button type='button' class='btn' :class='active === 0 ? 'btn-primary' : 'btn-secondary'' @click='onBtnClick(0) '>全部</button>
    <button type='button' class='btn' :class='active === 1 ? 'btn-primary' : 'btn-secondary'' @click='onBtnClick(1)'>已完成</button>
    <button type='button' class='btn' :class='active === 2 ? 'btn-primary' : 'btn-secondary'' @click='onBtnClick(2)'>待完成</button>
  </div>
</div>
</template>
<script>
export default {
  name: 'TodoButton',
  emits: ['update:active'],
  props: {
    active: {
      type: Number,
      required: true,
      default: 0,
    }
  },
  methods: {
    onBtnClick(index) {
      if (index === this.active) return
      this.$emit('update:active', index)
    }
  }
}
</script>
<style scoped>
.button-container {
  margin-top: 30px;
  margin-left: 80px;
  width: 400px;
  text-align: center;

}
.btn {
  font-size: 20px;
  height: 60px;
  width: 80px;
  margin-left: 50px;
  background-color: powderblue;
  border: 1px solid white;
}
.btn-group {


}
</style>