vue中class类名绑定属性的方式归纳总结

通过class类名，来给元素绑定属性。绑定class属性有以下几种方式

<template>
  <div>
    <!-- 方式一：放置字符串 -->
    <p class="active">百无禁忌</p>
    <!-- 第二种：对象语法。放置对象 -->
    <!-- 属性值是一个布尔类型 -->
    <!-- <p :class="{类名:属性值}">天官赐福</p> -->
    <p :class="{ active: true }">天官赐福</p>
    <!-- 多个属性，前面类名在style里面控制好想要的样式，后面动态控制 -->
    <p :class="{ active: true, flowers: isActive }">身在无间</p>
    <button @click="isActive = !isActive">改变active</button>
    <hr>
    <!-- 这两个class不会覆盖，两个一起的效果是合并 -->
    <p :class="{ active: isActive }" class="flowers">心在桃源</p>
    <!-- 当class比较多，比较复杂，可以使用对象，放在data里面。不过太多复杂可以使用计算属性 -->
    <p :class="classObj">世中逢尔</p>

    <!-- 使用计算属性 -->
    <p :class="classObjCom">雨中逢花</p>
    <h1>数组语法</h1>
    <!-- 数组语法 -->
    <p :class="[flowers,activeClass]">天官赐福</p>
    <!-- 数组对象相结合 -->
    <p :class="[flowers,{active:isActive}]">百无禁忌</p>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      classObj: {
        active: true,
        flowers: true
      },
      error: null,
      activeClass:"active"
    }
  },
  computed:{
    classObjCom:function(){
      return {
        // 两个条件同时成立的时候才会显示active
        active:this.isActive && !this.error,
        // 当报错的时候显示flowers的样式
        flowers:this.error
      }
    }
  }
}
</script>

<style scoped>
.active {
  font-size: 50px;
  color: rebeccapurple;
}

.flowers {
  background-color: plum;
}
</style>