vue中动态绑定css和style

当我们需要动态的改变view中样式的时候:

<template>
  <div class="">
    <!-- 第一种: 可以写成三元表达式切换-->
    <div :class="first"></div>

    <!-- 第二种 :当为true时显示-->
    <div :class="{ classA: hasClassA, classB: hasClassB }"></div>

    <!-- 第三种 -->
    <div :class="['classA', 'classB']"></div>

    <!-- 还有style动态绑定 -->
    <h2>2. style绑定</h2>
    <div :style="{ color: activeColor, fontSize }">
      :style="{ color: activeColor, fontSize: fontSize + 'px' }"
    </div>

    <!-- 切换 -->
    <button @click="update">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 第一种
      first: "classA",
      // 第二种
      hasClassA: true,
      hasClassB: false,
      // style
      activeColor: "red",
      fontSize: "20px",
    };
  },
  methods: {
    update() {
      this.myClass = "classB";
      this.hasClassA = !this.hasClassA;
      this.hasClassB = !this.hasClassB;
      this.activeColor = "yellow";
      this.fontSize = "30px";
    },
  },
};
</script>
<style >
/* 第一种 */
.classA {
}
/* 第二种 */
.classA {
}
.classB {
}
</style>