<template>
  <div 
    :class="{ 
      'active': isActive,    // isActive為true時添加active類
      'text-danger': hasError // hasError為true時添加text-danger類
    }"
  >
    動態(tài)class示例
  </div>
</template>

<script>
// Vue2
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}

// Vue3（組合式API）
import { ref } from 'vue'
const isActive = ref(true)
const hasError = ref(false)
</script>

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

<template>
  <!-- 基礎用法：直接傳入類名變量 -->
  <div :class="[baseClass, activeClass]"></div>

  <!-- 帶條件判斷：三目表達式 -->
  <div :class="[isActive ? 'active' : '', hasError ? 'error' : 'normal']"></div>

  <!-- 數(shù)組嵌套對象：更靈活的條件控制 -->
  <div :class="[{ active: isActive }, 'fixed']"></div>
</template>

<script>
// Vue2
data() {
  return {
    baseClass: 'box',
    activeClass: 'highlight',
    isActive: true,
    hasError: false
  }
}
</script>

<template>
  <div :class="computedClasses"></div>
</template>

<script>
// Vue2
export default {
  data() {
    return { isActive: true, count: 10 }
  },
  computed: {
    computedClasses() {
      return {
        active: this.isActive && this.count > 5, // 多條件組合
        'text-large': this.count > 8,
        'text-small': this.count <= 8
      }
    }
  }
}

// Vue3
import { ref, computed } from 'vue'
const isActive = ref(true)
const count = ref(10)
const computedClasses = computed(() => ({
  active: isActive.value && count.value > 5,
  'text-large': count.value > 8
}))
</script>

<template>
  <div 
    :style="{ 
      color: textColor,          // 動態(tài)顏色（變量）
      fontSize: fontSize + 'px', // 動態(tài)尺寸（拼接單位）
      'background-color': bgColor // 短橫線屬性（需引號）
    }"
  >
    動態(tài)style示例
  </div>
</template>

<script>
// Vue2
export default {
  data() {
    return {
      textColor: 'blue',
      fontSize: 16,
      bgColor: '#f5f5f5'
    }
  }
}

// Vue3
import { ref } from 'vue'
const textColor = ref('blue')
const fontSize = ref(16)
const bgColor = ref('#f5f5f5')
</script>

<template>
  <div :style="[baseStyles, activeStyles]"></div>
</template>

<script>
// Vue2
data() {
  return {
    baseStyles: { color: 'black', fontSize: '14px' },
    activeStyles: { color: 'red', fontWeight: 'bold' } // 覆蓋color
  }
}
</script>

<template>
  <div :style="computedStyles"></div>
</template>

<script>
// Vue3示例
import { ref, computed } from 'vue'
const isHighlight = ref(true)
const width = ref(200)

const computedStyles = computed(() => ({
  width: width.value + 'px',
  height: '100px',
  backgroundColor: isHighlight.value ? '#ff0' : '#fff',
  border: isHighlight.value ? '2px solid red' : '1px solid #ccc'
}))
</script>