一.根据span数字内容改变数字本身样式(两种样式)
<template>
//使用三目运算符,判断当span的val是否小于0给其不同的class名
<span class="inOut" :class="abc.upgold<0?'inColor':'outColor'">得分:{{abc.upgold}}</span>
</template>
<style scoped>
.inColor{
color: red!important
}
.outColor{
color: #34ea34!important
}
</style>
二.根据span数字内容改变数字所在span背景色(多种样式)
<template>
//将span的val放在listcolor数组中
<td :style="{color:resultColor[item.result]}">{{item.result}}</td>
</template>
export default{
data(){
return{
//提前准备listcolor对象数组,规定渲染不同数据作为key值来选取不同的对象(样式)
resultColor:{"W":"#ff5252","L":"#2a2a2a","D":"#4ce029"},
}
}
}