Vue之计算属性 使用计算属性设置动态style、class样式，做到class与style随item值变化而变化

<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';
      }
    }
  },

实际样式图