014.Vue3入门，class属性的几种绑定方法

1、代码如下：

<template>
  <h3>class绑定</h3>
  <div :class="{ 'active':isActive , 'text-danger':hasError }">Class样式绑定1</div>
  <div :class="classObject">Class样式绑定2</div>
  <div :class="[arrActive,arrHasError]">Class样式绑定3</div>
  <div :class="[isActive ? 'active text-danger' : '']">Class样式绑定4</div>
  <div :class="[isActive ? 'active':'',{'text-danger':hasError}]">Class样式绑定5</div>

</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      classObject: {
        active: true,
        'text-danger': true
      },
      arrActive: "active",
      arrHasError: "text-danger"
    }
  }
}
</script>

<style>
.active {
  font-size: 30px;
}

.text-danger {
  color: red;
}
</style>

2、效果如下：