vue實現動態綁定class--（三目運算符）根據span數字內容改變其樣式

一.根據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"},
　　　　}
　　}
}