vue-动态添加class颜色

``

css


.colorred {
    color:red

  }
  .colorblue {
    color: blue;
  }
  .colorgeeen {
    color: green;
  }

js

  newType:{
         '1':'red',
        '2':'green',
        '3':'blue',
      },
      

// 方法1：  
// trendColor 为变量  。 在获取的数据table后。对数据进行处理。 将数据map 。 获取当前行的变量flag，用来判断 给trendColor css【colorred，colorblue ，colorgeeen】
。
  <span :class="trendColor"> {{trend[scope.row.trend]}} </span>

//方法2
//colorred  colorgeeen   colorblue 为 css值
动态添加class ，让满足条件为true的class添加进来
如果newType[scope.row.trend]=='red' 为true ，那么  colorred 将添加成功。

<span :class="{'colorred':newType[scope.row.trend]=='red','colorgeeen':newType[scope.row.trend]=='green', 'colorblue':newType[scope.row.trend]=='blue'}"> {{trend[scope.row.trend]}} </span>
// 方法3 

给span标签的 style内， 添加一个color 。 color的值为变量的值
这个是最简单也最方便的 。较少的切换可以选择这个。
如果  newType[scope.row.trend] ==1 ，则color为 red
 <span :style="{color:newType[scope.row.trend]}"> {{trend[scope.row.trend]}} </span>
 
 
 
 

//方法4 //传入的id 比如为 1 2 3
设置class为

.color_1{
   color:red}
    .color_2{
   color:green}
    .color_3{
   color:blue}

// 以获取的id来判断id的显示是哪一个。动态添加拼接下class。如果很少还方便写。这要写很多class

<div :class="'color_'+id">
    <div class="inline-block">
      <span>测试颜色</span>
    </div>
  </div>
  
  

  changeColor(id){
      this.colorArr.map((item)=>{
        if(item.id=='2') {
         this.id=item.id
        }
      })
    },

方法5

 <div   :class="'rateColor'" :style="{'background-color':colorArr[platIdCS].color}">
        <div class="inline-block">
          <span
           >{{colorArr[platIdCS].name}}</span>
        </div>
      </div>
      
  
  
  data(){
  platIdCS:'1',
   colorArr:{
        '1':{
          color:'#96d5b7',
          name:'名称1'
        },
         '3':{
          color:'#a6b3f6',
          name:'名称2'
        },
         '4':{
          color:'#f48188',
          name:'名称3'
        },
        }
  }
  
  
  如果 是 platIdCS是'1'
  colorArr[platIdCS].color 为 #96d5b7 这个颜色