<div v-for="(item,index) in list" :key="index" @click="clickCard(item)">
<div :style="_iconStyle(item)">
<div>
<i class="iconfont " :class="_iconClass(item)"></i>
</div>
</div>
</div>
其中我们从获取的list中获取item值,使用:style、:class进行改变样式
在computed里面
computed:{
_iconStyle(){
return (item)=>{
return {
'background-color'
: item.SN_BusinessType == 1 ? '#FFAC54'
: item.SN_BusinessType == 10000 ? '#7098FD'
: item.SN_BusinessType ==10001 ? '#FE6665' : '#5F8CFD'
}
}
},
_iconClass() {
return (item) => {
return item.SN_BusinessType == 1 ? 'icon-anjianshenhe'
: item.SN_BusinessType == 10000 ? 'icon-data'
: item.SN_BusinessType == 10001 ? 'icon-daojishi'
: 'icon-project';
}
}
},
实际样式图