---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

首先样式类定义

<style>
.active {
  font-size: 50px;
}
.text-danger {
  color: red;
}
</style>

动态和静态类结合

isActive表示是否使用.active类,hasError 表示是否使用.text-danger类

  <p :class="{ active: isActive, 'text-danger': hasError }">

      isActive: true,
      hasError: true,

---

## 采用对象的方式引入 classObject表示使用classObject对象中指定的类 ```html

采用对象的方式引入

```

      classObject: {
        active: true,
        "text-danger": true,
      },

---

采用数组的方式引入

ArrIsActive指定使用active类,ArrHasError指定使用text-danger类

  <p :class="[ArrIsActive, ArrHasError]">采用数组的方式引入</p>

      ArrIsActive: "active",
      ArrHasError: "text-danger",

---

数组语法的动态类名

在数组语法中使用三元表达式或其他表达式来动态生成类名
:class="[isActive ? 'active' : '', hasError ? 'text-danger' : '']"表示如果isActive为true,启用.active类的属性,hasError 同理.

---

代码演示

ClassDemo.vue

<template>
  <h3>class绑定</h3>
  <p>class样式绑定</p>
  <p :class="{ active: isActive, 'text-danger': hasError }">
    其中isActive=true,启用active类的样式
  </p>
  <p :class="classObject">采用对象的方式引入</p>
  <p :class="[ArrIsActive, ArrHasError]">采用数组的方式引入</p>
  <p :class="[isActive ? 'active' : '', hasError ? 'text-danger' : '']">
    带有js语句的
  </p>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: true,
      classObject: {
        active: true,
        "text-danger": true,
      },
      ArrIsActive: "active",
      ArrHasError: "text-danger",
    };
  },
};
</script>

<style>
.active {
  font-size: 50px;
}
.text-danger {
  color: red;
}
</style>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---