:class在项目中的使用

都挺好，刚刚好

已于 2022-09-05 09:59:02 修改

阅读量251

点赞数

分类专栏：项目文章标签： javascript 前端 html

于 2022-07-19 10:31:48 首次发布

本文链接：https://blog.csdn.net/seimeii/article/details/125865328

版权

对象形式

 :class="{'date-picker': true, 'f-width': ['date'].includes(type)}"

在这里插入图片描述

 <el-button type="text"
            :class="{'ash': timeType != 3 }"
            @click="handleChangeType(3)">本年
 </el-button>

 v-bind:class="{ contentCss: item.media == 3 }"

.contentCss {
   
  border: 1px solid #651deb !important;
}

<div class="l-modal-content" :class="{ 'r-modal-show': visible}">

  .r-modal-show {
   
    display: none;
  }

 :class="{ 'check-options': ((ind2 == 0 && (parameterObj[item.backName] && parameterObj[item.backName].length == 0)) || (parameterObj[item.backName] && parameterObj[item.backName].includes(ind + '-' + ind2))), 'disabled': isDisabled(item2)}"

 <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">

数组形式

 <span :class="[ scope.row.statue > 5 || scope.row.statue == '' ? 'NeverOnline' : '',colorData[scope.row.statue]]">{
   {
    statueNameList[scope.row.statue] || '从未上线' }}</span>

      colorData: {
   
        0: 'yellow',
        1: 'orange',
        2: 'Online',
        3: 'blue',
        4: 'NeverOnline',
        5: 'Nev