Vue/uniapp 点击盒子二选一，多选

盒子二选一

 <view class="" style="
                          display: inline-block;
                          margin: 20rpx;
                          border: 1px solid gray;
                          font-size: 24rpx;
                          width: 120rpx;
                          height: 48rpx;
                          text-align: center;
                          line-height: 48rpx;
                          border-radius: 24rpx 24rpx 24rpx;
                          color: gray;
                        " v-for="(item, index) in subjectsList" :key="item"
                        :class="isNew === index ? 'customStyle' : ''"
                        @click="clicksubjectsBtn(index, item)">
                        {{ item }}
                      </view>

JS

 // 文理科
      clicksubjectsBtn(index, item) {
        this.isNew = index;
      },

CSS

 .customStyle {
    color: #fca531 !important;
    border: 1rpx solid #fca531 !important;
  }

盒子多选

<view class="" style="
                           display: inline-block;
                           margin: 20rpx;
                           border: 1px solid gray;
                           font-size: 24rpx;
                           width: 120rpx;
                           height: 48rpx;
                           text-align: center;
                           line-height: 48rpx;
                           border-radius: 24rpx 24rpx 24rpx;
                           color: gray;
                         " v-for="(item, index) in subjectsList" :key="item" :class="{
                          customStyle: rSelect.indexOf(index) != -1,
                        }" @click="clicksubjectsBtnHe(index, item)">
                        {{ item }}
                      </view>

JS

定义变量

rSelect: [],

  clicksubjectsBtnHe(index, item) {
        console.log(this.rSelect.indexOf(index) == -1); //true false
        if (this.rSelect.indexOf(index) == -1) {
          console.log(index, item) //打印下标
          if (this.rSelect.length < 3) {
            this.rSelect.push(index); //选中添加到数组里
            // 综合类选三存次选字段
            this.rSelectItem.push(item)
          } else {
            this.$refs.uToast.show({
              title: '任选三门学科',
              type: 'warning',
            })
          };
        } else {
          this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
          // 综合类选三存次选字段
          this.rSelectItem.splice(this.rSelectItem.indexOf(item), 1)
        }
        console.log(this.rSelectItem);
      },

CSS

 .customStyle {
    color: #fca531 !important;
    border: 1rpx solid #fca531 !important;
  }