vue中根据不同的值渲染不同的颜色

 **  html**
  <ul class="dialogTopTip">
    <li v-for="(item,idx) in tipList"                 
    :key="idx">
      <div class="titleCircle" :style="activation(item)"></div>
      <span>{{item}}</span>
    </li>
  </ul>
   ** js**
  data(){
      return{
         tipList:['高报','高高报','趋势高报','趋势高高报'],
      }
  }
  computed: {
    activation() { //修改弹框提示灯的颜色            
      return (icontent) => { // 使用JavaScript闭包，进行传值操作
        if (icontent === "高报"){
            return {'background':'#FFBE44'}
        } 
        else if (icontent === "高高报"){
            return {'background':'#F152B4'}
        } 
        else if (icontent === "趋势高报"){
            return {'background':'#FF9F44'}
        }
        else if (icontent === "趋势高高报"){
            return {'background':'#F15E52'}
        }         
      }
    }
  },
 ** css**
  .dialogTopTip{
      display: flex;
      justify-content: space-between;
      width: 30%;
      li{
        display: flex;
        justify-content: start;
        color: #fff;
        .titleCircle{
          width: 10px;
          height: 10px;
          // background: #4FD114;
          border-radius: 50%;
          margin-right: 5%;
          margin-top: 3%;
        }
        span{
          display: block;
          width:80px;
        }
      }
    }