如何在Vue的类绑定三元运算符中写入动态变量名？

<template>
  <div :class="dynamicClass">Hello, Vue!</div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // 假设我们有一个响应式变量，用来决定类名
    const isActive = ref(true);

    // 使用计算属性来返回动态的类绑定
    const dynamicClass = computed(() => {
      return isActive.value ? 'active-class' : 'inactive-class';
    });

    // 返回计算属性，以便在模板中使用
    return {
      dynamicClass
    };
  }
};
</script>

<style>
.active-class {
  color: green;
}

.inactive-class {
  color: red;
}
</style>

<template>
  <div :class="isActive ? 'active-class' : 'inactive-class'">Hello, Vue!</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isActive = ref(true);

    return {
      isActive
    };
  }
};
</script>

<style>
/* ... */
</style>