设类名为变量

目录

1. 类名有两个变量

2. 类名有是三个变量

---

1. 类名有两个变量

在html中直接写一个三元就可以。

<i :class="comState === '连接' ? 'activeCom' : 'activeComState'"></i>

...
data(){
 return{
   comState：“”, //初始化
 }
}
mounted(){
 this.init();
},
methods:{
 init(){
  this.comState="连接"
 }
}
...

<style scope>
.activeCom{
 color:#121212;
  ...
}
.activeComState{
 color:red;
  ...
}
</style>

2. 类名有是三个变量

思路：先定义一个变量，用来存储类名；

          绑定类名  :class="chengestyle1"

          在方法里给chengestyle1赋值（ps:是改变的类名）

ps: 为什么写this3[c]而不是this3.c ？？

      回答：因为c是变量，所以要用this3[c]

官方回答：要给对象的某个属性赋值，属性名是不确定的，是变量，那么写法就是 this.objectName[属性名]

<template>
  <div class="dycIndexStyle">
    <div style="padding-top:5%;height:75%">
          <el-row class="yunXing">
            <el-col :span="5"> 运行状态:</el-col>
            <el-col
              :span="8"
              :class="chengestyle1"
            >{{ centerData.name1 }}</el-col>
          </el-row>
          <el-row class="yunXing">
            <el-col :span="5">运行状态:</el-col>
            <el-col
              :span="8"
              :class="chengestyle2"
            >{{ centerData.name2 }}</el-col>
          </el-row>
    </div>
   
  </div>
</template>
<script>
let this3 = null;

export default {
  data() {
    return {
      // 默认值
      centerData: {
        name1: "",
        name2: "",
      },
      //中间下面字体的颜色（之所以这么写是因为每个字的字体、颜色不一致）
      chengestyle1: "changeStyle3", //默认类名=changeStyle3
      chengestyle2: "changeStyle3",
    };
  },
  components: {
    
  },
  created() {
   
  },
  mounted() {
    this3 = this;
    this3.init();
  },
  watch: {},
  methods: {
    //#region 中间接口数据
    async init() {
      for (const item in this3.centerData) {
        switch (item) {
          case "name1":
            // if (1 <= this3.centerData[item] && this3.centerData[item] <= 7) {
            //   this3.chengestyle1 = "changeStyle1";
            //   this3.estimate(this3.centerData[item], "name1");
            // } else if (
            //   8 <= this3.centerData[item] &&
            //   this3.centerData[item] <= 9
            // ) {
            //   this3.chengestyle1 = "changeStyle2";
            //   this3.estimate(this3.centerData[item], "name1");
            // } else {
            //   this3.chengestyle1 = "changeStyle3";
            //   this3.centerData.name1 = "系统正常";
            // }
            this3.changeClassname(
              this3.centerData[item],
              "changeStyle1",
              "name1"
            );
            break;
          case "name2":
            //调用方法
            this3.changeClassname(
              this3.centerData[item],
              "changeStyle2",
              "name2"
            );
            break;
           default:
            break;
        }
      }
    },
    // 用于改变类名
    /**
    * item:this3.centerData[item] ,指的是字段的值
    * c: 要改变的类名
    * n：字段名
    */
    changeClassname(item, c, n) {
      if (1 <= item && item <= 7) {
        this3[c] = "changeStyle1";
      } else if (8 <= item && item <= 9) {
        this3[c] = "changeStyle2";
      } else {
        this3[c] = "changeStyle3";
        this3.centerData[n] = "系统正常";
      }
    },
    //#endregion

   
  },
};
</script>

<style scoped>
.changeStyle1{
  color:red
}

.changeStyle2{
  color:blue
}

.changeStyle3{
  color:green
}

</style>