前端动态class-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49407241/article/details/132942945

本文详细介绍了Vue中如何使用对象单个绑定、多个class、计算属性、数组类和三元表达式实现动态添加CSS类，以控制元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：对象单个绑定

效果：

<template>
  <div>
    <el-button @click="clickBtn" :class="{ active: isActive }"
      >点击我</el-button
    >
  </div>
</template>

<script>
export default {
  data () {
    return {
       isActive: true
       }
  },
  methods: {
    clickBtn () {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style scoped>
.active {
  color: red;
}
</style>

2：多个class

<template
  ><div>
    <div
      class="activeOne"
      :class="{ activeTwo: isActive, activeThree: hasError }"
    >点击我</div>
  </div>
</template>
<script>
export default {
  data () {
    return { isActive: true, hasError: true }
  }
}
</script>
<style scoped>
.activeTwo ,.activeThree{
  color: red;
}
</style>

3:计算属性class

<template>
  <div><div :class="taxonOne">你干嘛？哎哟</div></div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      isError: null,
      error: { type: "fail" }
    };
  },
  computed: {
    taxonOne() {
      return {
        taxonTwo: this.isActive && this.isError == null, 
        taxonThree: this.error && this.error.type == "fail" 
      };
    }
  }
}
</script>

<style scoped>
.taxonTwo {
  color: red;
}
.taxonThree {
  color: pink;
}
</style>

4：数组class

<template>
  <div>
    <div :class="['one', 'two']">你干嘛？哎哟</div>
  </div>
</template>
<style scoped>
.one {
  color: pink;
}
.two {
  border: 1px solid yellow;
}
</style>

5：三元表达式class

<template>
  <div>
    <div v-bind:class="[isActive ? 'one' : 'two']">内容内容内容</div>
  </div>
</template>
<script>
export default {
  data () {
    return { isActive: false }
  }
}
</script>
<style scoped>
.one {
  color: pink;
}
.two {
  color: yellow;
}
</style>