class绑定

class绑定

<!-- Class样式绑定 -->
<template>
  <p :class="{ 'ClassBinding': isActive }">Class样式绑定</p>
  <p :class="{ 'ClassBinding': !isActive }">Class样式绑定</p>
  <p :class="{ 'ClassBinding': !isActive, 'ClassBinding2':!isActive }">Class样式绑定2</p>
  <p :class="[ 'ClassBinding', 'ClassBinding2' ]">Class样式绑定2</p>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isActive = ref(false);
</script>
<style>
.ClassBinding {
  color: red;
  font-size: 20px;
}
.ClassBinding2 {
  color: blue;
  font-size: 40px;
}
</style>