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