如何将变量应用于VueJS中的css [无内联样式]

<template>
  <div :class="computedStyles">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  computed: {
    computedStyles() {
      return {
        active: this.isActive,
        'text-danger': !this.isActive
      };
    }
  }
};
</script>

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

<template>
  <div :class="{ active: isActive, 'text-danger': !isActive }">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

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

<template>
  <div :class="[isActive ? 'active' : 'text-danger']">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

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