vue中关于src，class，style的三元表达式的使用

src,class中三元表达式的使用

说明

根据不同的路由，进行选中态的切换。并且进行图片的替换

代码

 <div
        :class="[
          $route.path == '/home'
            ? 'header-main-li header-newclass'
            : 'header-main-li',
        ]"
        @click="getRoute('/home')"
      >
        <img
          :src="[
            $route.path == '/home'
              ? require('../assets/image/statistical_2.png')
              : require('../assets/image/statistical_1.png'),
          ]"
          alt=""
          class="header-img2"
        />
        <span>挖矿统计</span>
      </div>

图例

icon中使用三元表达式

代码

  <i
            :class="[
              Math.sign(weeklyData.amount_mom) > 0
                ? 'el-icon-top-right'
                : 'el-icon-bottom-right',
            ]"
            style="color: #ff1d49; font-size: 15.5px"
            :style="{
              color:
                Math.sign(weeklyData.amount_mom) > 0 ? '#FF1544' : '#21CE9D',
            }"
          ></i>

说明

根据不同的数据，显示不同的icon，并且显示不同的颜色

图例