vue.js根据获取到不同的数据显示不同的样式

项目需求：

项目需求如上图所示，要根据后台返回来的数据是否为天猫的数据，如果是天猫，返回来的值是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