Vue中动态设置class类名和style样式的操作指南

<template>
  <div 
    :class="{ 
      'active': isActive,    // isActive为true时添加active类
      'text-danger': hasError // hasError为true时添加text-danger类
    }"
  >
    动态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>

  <!-- 数组嵌套对象：更灵活的条件控制 -->
  <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,          // 动态颜色（变量）
      fontSize: fontSize + 'px', // 动态尺寸（拼接单位）
      'background-color': bgColor // 短横线属性（需引号）
    }"
  >
    动态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>