vue中class样式与内联样式

（1）:style使用

<div class="score" :style="{ color: colorComputed(item.status) }">{{item.score}}</div>

computed: {
    colorComputed() {
      return (status) => {
        if (status === 1 || status === 2) {
          return '#FF1E00';
        }
        if (status === 3 || status === 4) {
          return '#F7B500';
        }
        if (status === 5) {
          return '#00DA62';
        }
      };
    }
  },

 <template slot-scope="scope">
    <span :style="{ color: colorComputed(scope.row.hegezhuangtai) }">{{ scope.row.shijiedefen }}-{{ scope.row.hegezhuangtai }}</span>
 </template>
 
 computed: {
    colorComputed() {
      return (text) => {
        if (text === '优秀') {
          return '#00AE65';
        }
        if (text === '良好') {
          return '#FA8C15';
        }
        if (status === '不合格') {
          return '#E62512';
        }
      };
    }
 },

（2）:class用法

<i
  class="my-radio"
  :class="[thirdItem.isChecked ? 'is-checked' : '']"
  @click="selectScore(shipInfo,item, subItem, thirdItem)"
></i>

<ul class="position-nav" :class="{'fixed-menu': fixedMenu}" v-if="shipInfos.length>0">
　　<li
   　　class="nav-item"
      :class="menuClickIndex === index ? 'active' : ''"
      @click="clickMenu(index)"
      v-for="(shipInfo, index) in shipInfos"
      :key="index"
       >
　　　　{{ shipInfo.yinsufenlei }}({{ shipInfo.quanzhong }})
　　</li>
</ul>