Table of contents
1. The class name has two variables
2. The class name has three variables
1. The class name has two variables
Just write a ternary directly in 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. The class name has three variables
Idea: first define a variable to store the class name;
Binding class name: class="chengestyle1"
Assign a value to chengstyle1 in the method (ps: is the changed class name)
ps: Why write this3[c] instead of this3.c? ?
Answer: Because c is a variable, use this3[c]
Official answer: To assign a value to an attribute of an object, the attribute name is uncertain and is a variable, so the writing method is this.objectName[attribute name]
<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>