前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 按条件添加类

Vue 按条件添加类

作者头像
赤蓝紫
发布2023-01-02 16:20:51
9730
发布2023-01-02 16:20:51
举报
文章被收录于专栏:clz

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;
}

本文参与?腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体同步曝光计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue 按条件添加类
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com