js 小技巧 （ 根据不同的状态生成不同的颜色和状态 ）

 HTML 

解决办法  动态绑定 color 然后 根据 三元表达式 进行处理

js

解决办法  动态绑定 color 然后 根据在每个数据的后面添加color属性，可能有的人会问vueb不能用不然不会双向绑定，确实vue要使用vueset()，但是这个值也只是简单的展示用所以，改动手动赋值就可以

关键点符号 .  在 js 里面是调用的意思例如 Dog.name 

案例

html

<template>
    <div>
          <div v-for="(item,index) of data"  :key="index" > {{item.value}} <span>颜色:</span> <span :style="{color:item.color}">{{ item.color }}</span></div>
    </div>
</template>

 js

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
     return{
         newname:'cjjdchdkhjvhhjxhv',
         data:[
             {
                  value: '张三',

             },
             {
                 value: '李四',

             },
             {
                 value: '王五',

             }
         ]
     }
  },
    computed:{
     // ...mapState('count',['name']),
    // getname(){
        // return  this.$store.state.count.name
    // }
    },
    mounted() {
      this.initData();
    },
    created:{
         // this.initDate();
    },
  methods:{
      initData() {
          // items.value ="王五" ? items.color = "red" : '' 等于 if(items.value ="王五"){items.color = "red" } else{ items.color=" }
          this.data.forEach((items) => {
              items.value == "张三" ? items.color = "red" : items.value == "李四" ? items.color = "blue" :  items.value == "王五" ? items.color = "" : '';
          })
          this.beforeUpdate()
          console.log( this.data,"idoddiodio")
      }
  }
}

效果

或者：

一般我们都有状态id使用拼接法   :class='item.id+'type'' 

这样我们的到一个动态拼接的Class名称

我们再对相应相对应的class就可以了

例如：id = 1

 .1type{

 }