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>