（案例）写点击选中，再次点击取消的选中的样式

<template>
  <div class="outer-box">
    <div class="select-box">
      <div
        v-for="(item, index) in btnVal"
        :key="index"
        class="select-btn"
        :class="{ check: isActived(index) }"
        @click="selectVal(index)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        btnVal: ['导演', '演员', '场务', '设计', '录音师', '程序员', '123'],
        result: [],
      };
    },
    methods: {
      selectVal(index) {
        const res = this.btnVal[index];
        //第二次点击时取消选中
        if (this.result.indexOf(res) != -1) {
          this.result.splice(this.result.indexOf(res), 1);
        } else {
          if (this.result.length == 3) {
            this.$Toast('最多选择3个');
            return;
          }
          this.result.push(res);
        }
        console.log(this.result);
      },
      isActived(index) {
        const res = this.btnVal[index];
        if (this.result.indexOf(res) != -1) {
          return true;
        }
        return false;
      },
    },
  };
</script>
<style lang="less" scoped>
  .select-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
  .select-btn {
    width: 60px;
    height: 25px;
    border-radius: 10px;
    font-size: 14px;
    background-color: #eee;
    color: #333;
    text-align: center;
    line-height: 25px;
    align-content: flex-start;
    cursor: pointer;
//注意：这个hover它是适用于web页面开发，如果在手机端展示的时候就不存在鼠标悬停的样式
    &.check,
    &:hover {
      background: #2247ff;
      color: #ffffff;
    }
  }
</style>