vue 行内多重判断，状态使用枚举

性野喜悲

已于 2023-10-24 15:19:05 修改

阅读量1.7k

点赞数

分类专栏： vue html+css 文章标签： vue.js javascript 前端 1024程序员节

于 2020-11-14 15:26:35 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/109691505

版权

vue 同时被 2 个专栏收录

133 篇文章 4 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

多个条件判断显示不同的class

          class="agenda-title-item"
          :class="[
            titleIdx == index ? 'titleActive' : '',
            $i18n.locale == 'en' ? 'agenda-title-item-en' : '',
          ]"
          v-for="(item, index) in $t('agendaTitle')"
          :key="index"
          @click="changeTab(index)"
        >
          {{ item }}
        </div>

判断class

html:

        <!-- swiperIndex return中声明的变量swiperIndex:1 -->
  <div
            class="pointerBox flex-end"
            :class="`${
              swiperIndex == 1
                ? 'pointerBoxBlue'
                : swiperIndex == 2
                ? 'pointerBoxRed'
                : swiperIndex == 3
                ? 'pointerBoxYellow'
                : ''
            }`"
          >
            <div class="registrationStatus flex-center">报名成功</div>
          </div>

css:

  .flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }  
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }  
.pointerBox {
    width: 175px;
    height: 60px;
    position: relative;
  }
  .pointerBoxBlue {
    background: linear-gradient(347deg, #0064ff 15%, #5ba8ff 100%);
  }
  .pointerBoxYellow {
    background: linear-gradient(347deg, #fcb733 15%, #fdd474 100%);
  }
  .pointerBoxRed {
    background: linear-gradient(347deg, #ee3236 15%, #f77d80 100%);
  }
  .pointerBox:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 30px solid white;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
  }
  .registrationStatus {
    width: 145px;
    font-size: 24px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #ffffff;
  }

文字判断:

三目运算符：

            <div class="registrationStatus flex-center">
              {{
                swiperIndex == 1
                  ? "报名成功"
                  : swiperIndex == 2
                  ? "报名失败"
                  : swiperIndex == 3
                  ? "报名审核中"
                  : ""
              }}
            </div>

枚举：

html:
    
 
            <el-table-column label="订单状态" width="100">
              <template slot-scope="scope">
                <span
                  :style="'color:' + orderStatusColor[scope.row.orderStatus]"
                >
                  {{ orderStatusVal[scope.row.orderStatus] }}
                </span>
              </template>
            </el-table-column>

js:
    
    return{
           orderStatusVal: {
        "-1": "已取消",
        "-2": "退款申请中",
        "-3": "已退款",
        "-4": "部分退款",
        0: "待支付",
        1: "已支付",
      },
      orderStatusColor: {
        "-1": "rgba(36,46,66,0.4)",
        "-2": "#FFAB4F",
        "-3": "#EE423D",
        "-4": "#EE423D",
        0: "#FFAB4F",
        1: "#04B935",
      },
     }