Vue 按条件添加类

Vue 按条件添加类

代码语言：javascript复制

<el-card class="box-card">
      <div class="question" ref="question" v-for="(question, index) in questionList" :key="question.id">
        <h4>{{(index 1)  10*(currentPage-1)}}. {{question.ques}}</h4>
        <div v-for="option in question.options" :key="option.id" :class="[
                                                                    {'choose': true},
                                                                    {'wrong': option.value[0] === question.useranswer}, 
                                                                    {'right': option.value[0] === question.answer}
                                                                  ]">
          <label>
            <span>{{option.value}}</span>
          </label>
        </div>
      </div>
      <el-pagination background layout="prev, pager, next, jumper" :total="total" :page-size="pageLimit" :hide-on-single-page="noPagination" @current-change="currentChange">
      </el-pagination>
    </el-card>

项目中直接抽出来的(人菜勿喷)

关键：

代码语言：javascript复制

<div :class="[{ red: true }, { blue: false }]">红色</div>

<div :class="[{ red: false }, { blue: true }]">蓝色</div>

css：

代码语言：javascript复制

.red {
  color: red;
}

.blue {
  color: blue;
}

css

0 人点赞