專案需求：

專案需求如上圖所示，要根據後臺返回來的資料是否為天貓的資料，如果是天貓，返回來的值是1，然後頁面就顯示天貓的標誌，如果返回來的值不是1，頁面是顯示淘的標誌，這裡介紹一下三目運算的實現方式。話不多少，直接上程式碼

// js程式碼：

<li class="item" v-for="item in itemData" :key="item">
   <div class="Pic"><a :href="item.Quan_link"><img :src="item.Pic" alt="商品主圖"></a></div>
   <i :class= "item.IsTmall? 'tmall' : 'taobao'"></i>    // 這行程式碼是重點
   <a :href="item.Quan_link">
       <span class="itemTitle">{{item.D_title}}</span>
   </a>
</li>


// css程式碼：

    .tmall, .taobao{
        width: 25px;
        height: 25px;
        display: inline-block;
        background-size: cover;
    }

    .tmall{
        background: url('../../static/image/tmall.png')no-repeat;
    }

    .taobao{
        background: url('../../static/image/taobao.png')no-repeat;
    }
 

解釋一下這行程式碼：<i :class= "item.IsTmall? 'tmall' : 'taobao'"></i>

當資料 item.IsTmall的值為1的時候，i標籤的class會渲染為：class=“tmall”，否則渲染為：class=“taobao”

如果小弟說的有不對的地方 歡迎大家糾正哦，哈哈哈 這裡寫的程式碼僅為記錄專案需求。

wx交流：leecac