设置选中最大值，选中数达最大值时，其他选项置灰

需求描述：循环数组得到选项的div块，选中的爱好达到3个时，其他选项置灰，不能选择；点击取消3个中的一个选项，可以继续选择选项

图片描述：

循环得到选项                         

点击选中的样式                     

选中数量达到最大值             

代码设计：

<template>
  <div>
    <div class="interest-home flex">
      <p
        v-for="item in interestList"
        id="interest"
        :key="item.id"
        class="interest-item"
        :class="{
          bgcolor: spanIndex.indexOf(item.name) > -1,
          noclick: item.status,
        }"
        @click="changeSpan(item.name)"
      >
        {{ item.name }}
      </p>
      <p class="mobileStyle">*最多选择3个</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "test3",
  data() {
    return {
      interestList: [
        {
          id: "1",
          name: "吃饭",
        },
        {
          id: "2",
          name: "睡觉",
        },
        {
          id: "3",
          name: "打豆豆",
        },
        {
          id: "4",
          name: "炸鸡",
        },
        {
          id: "5",
          name: "可乐",
        }
      ],
      spanIndex: [],
    };
  },
  watch: {
    spanIndex: {
      handler(val) {
        if (val.length >= 3) {
          val.forEach((value) => {
            this.interestList.forEach((item) => {
              if (item.name === value) {
                item.status = true;
              }
            });
          });
          this.interestList.forEach((item) => {
            item.status ? (item.status = false) : (item.status = true);
          });
        } else {
          this.interestList.forEach((item) => {
            item.status = false;
          });
        }
      },
    },
  },
  methods: {
    // 兴趣爱好的处理
    changeSpan(name) {
      const arrIndex = this.spanIndex.indexOf(name);
      if (arrIndex > -1) {
        this.spanIndex.splice(arrIndex, 1);
      } else {
        this.spanIndex.push(name);
      }
    },
  },
};
</script>

<style>
.flex {
  display: flex;
  flex-wrap: wrap;
}
.interest-item {
  padding: 0px 15px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 30px;
  margin-bottom: -5px;
}
.noclick {
  pointer-events: none;
  background-color: #aaaaaa;
  padding: 0px 15px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 30px;
}
.bgcolor {
  padding: 0px 15px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 30px;
  background-color: #15a4ac;
  color: #fff;
}
</style>