B
ByteNote

vue3 TailwindCSS 如何使用 动态 class

9 min read
<template>
  <div :class="btnClass">按钮</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isDisabled: false
    }
  },
  computed: {
    btnClass() {
      return [
        "px-4 py-2 rounded-md",
        this.isActive ? "bg-blue-500 text-white" : "bg-gray-400 text-black",
        this.isDisabled && "opacity-50 cursor-not-allowed"
      ];
    }
  }
};
</script>