vue中class的绑定

<script>
export default ({
  data() {
    return {
      dangerousClass:"dangerous",
      activeClass:"active",
      isActive: true,
      error: null,
      classObj: {
        active: true,
        dangerous: true
      }
    }
  },
  computed: {
    classObjCom: function () {
      return {
        active: this.isActive && !this.error,
        dangerous: this.error
      }
    }
  },
})
</script>
<template>
  <!-- 第一种：放置字符串 -->
  <p class="active">helloworld</p>
  <!-- 第二种：对象 常用 -->
  <!-- <p :class="{类名：boolean}"></p> -->
  <p :class="{ active: isActive }">active:isActive</p>
  <button @click="isActive = !isActive">修改对象样式isActive</button>
  <p :class="{ active: isActive, dangerous: isActive }">多class</p>
  <p :class="{ active: isActive }" class="dangerous">:class指令与一般的class的attribute共存</p>

  <p :class="classObj">class对象样式classObj 危险的</p>
  <p :class="classObjCom">对象样式computed,活跃用户</p>
<!-- 数组样式 不常用-->
  <p :class="[activeClass, dangerousClass]">数组方式</p>
  <p :class="[activeClass]" class="dangerous">数组与一般class共存</p>
</template>
<style>
.active {
  font-size: 20px;
  color: blue;
}
.dangerous {
  background-color: red;
}
</style>