自学Vue(Class绑定)

class绑定分为三种

1.对象绑定class

（1）基本的对象绑定

	<p :class="{ active: isActive, 'text-danger': classStyle }" :key="index">

<script>
export default {
  data() {
    return {
      isActive: true,
      classStyle: true,
      };
      .active {
  font-size: 20px;
}
.text-danger {
  color: red;
}

（2）优化对象绑定

	<p :class="classObject" :key="index">样式绑定</p>

<script>
export default {
  data() {
    return {
       classObject: {
        active: true,
        text-danger:true
      },
      };
 .active {
  font-size: 20px;
}
.text-danger {
  color: red;
}

2.数组绑定class

  <p :class="[arrActive,arrHasError]" :key="index">样式绑定</p>

<script>
export default {
  data() {
    return {
       arrActive:"active",
       arrHasError:"text-danger",
      };
 .active {
  font-size: 20px;
}
.text-danger {
  color: red;
}

3.数组对象绑定class

这种方式一般没有采用，因为假如是在实际开发中会造成开发人员看不清晰。
而且注意:必须是[]里面包裹{}

<p :class="[{active:isActive},arrHasError]" :key="index">样式绑定</p>

<script>
export default {
  data() {
    return {
      isActive: true,
      classStyle: true,
      classObject: {
        active: true,
      },
      arrActive:"active",
      arrHasError:"text-danger",
    };
  },
};
</script>
<style scoped>
.active {
  font-size: 20px;
}
.text-danger {
  color: red;
}
</style>