uni-app：点击变色的答题模板（多选+单选）

代码段：

 <view class="result-tips">
          <view class="msg">
            <view class="blue"></view>
            <view class="msg-tip">蓝色为正确答案</view>
          </view>
          <view class="msg">
            <view class="red"></view>
            <view class="msg-tip">红色为自选答案</view>
          </view>
 </view>


 <view class="question">
            <!--题目 格式: 1/20 题目内容(多选单选)  (正确答案)-->
            <view class="question-title">
              {{ dataItem.questionNo }}/{{ dataItem.totalNum }}
              {{
                dataItem.isMulti
                    ? '(多选)'
                    : '(单选)'
              }}
              {{ dataItem.title }}
              （{{ result ? resultData.correctOptions : '' }}）
            </view>

           <!--选项和答案 颜色有三种:未选择的答案,自选答案,正确答案-->
            <view
                :class="right[alph[key]] ? 'choose right-active' : choose[alph[key]] ? 
                'choose choose-active' : 'choose'"
                @tap="radioChange(alph[key], dataItem)"
                v-for="(option, key) in dataItem.option"
                :key="key"
            >
              {{ alph[key] }}: {{ option }}
            </view>
    </view>

data数据

      //问题数据
      dataItem: {
      //是否多选
        isMulti: 0,
      //题目选项
        option: ['', '', '', '']
      },
      alph: ['A', 'B', 'C', 'D'],
      //选中的选项
      choose: {A: false, B: false, C: false, D: false},
      //正确的的选项
      right: {A: false, B: false, C: false, D: false},
      //最后选中的结果
      final: []

 // 题目点击事件
    radioChange(key, data) {
      //多选
      if (data.isMulti) {
        this.choose[key] = !this.choose[key];
        if (this.choose[key]) {
          this.final.push(key);
        } else {
          this.final.splice(this.final.indexOf(key), 1);
        }
        console.log(this.final);
      } else {
        this.choose = {
          A: false,
          B: false,
          C: false,
          D: false
        };
        this.choose[key] = true;
        this.final = [key];
      }
    },

实现效果