vue动态添加class

作者：霸气邪剑仙发布日期:2026-01-19 浏览:92

<template>
  <div :class="[isActive ? activeClass : '', errorClass]">
    Dynamic Class Example
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      activeClass: 'active',
      errorClass: 'error'
    };
  }
};
</script>

<style>
.active {
  color: green;
}

.error {
  border: 1px solid red;
}
</style>

解释说明：

:class 绑定用于动态地切换 CSS 类。
[isActive ? activeClass : ''] 是一个条件表达式，当 isActive 为 true 时，会添加 activeClass 类；否则不添加。
errorClass 总是会被添加到类列表中。
在 <style> 部分定义了 .active 和 .error 类的样式，分别为绿色文本和红色边框。

上一篇：vue2安装

下一篇：vue watcheffect