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="{background:listcolor[item.rq[0]]}">主<br/>{{item.rq[0]}}</td>
</template>
export default{
  data(){
    return{
      //提前准备listcolor对象数组,规定渲染不同数据作为key值来选取不同的对象(样式)
      listcolor:{"1":"rgb(221, 62, 62)", "2":"rgb(254, 62, 62)","":"gray","-1":"#4acc6c","-2":"#696969"},
    }
  }
}
 

猜你喜欢

转载自www.cnblogs.com/wd163/p/12114786.html