1. 使用 :style 绑定对象字面量

<div :style="{ color: textColor, backgroundColor: bgColor }"></div>

✅ 优点

• 简洁直观，适合少量样式。

• 可以直接绑定变量，响应式强。

❌ 缺点

• 不适合复杂或重复样式。

• 写死在模板中，可读性差。

2. 使用 :style 绑定计算属性或变量

<div :style="styleObject"></div>

computed: {
  styleObject() {
    return {
      color: this.textColor,
      backgroundColor: this.bgColor
    };
  }
}

✅ 优点

• 逻辑清晰，样式集中管理。

• 更适合复杂或动态样式。

• 可复用性强。

❌ 缺点

• 需要额外定义变量或计算属性。

• 初学者可能觉得多余。

3. 使用数组绑定多个样式对象

<div :style="[baseStyle, dynamicStyle]"></div>

✅ 优点

• 可以组合多个样式来源。

• 灵活性高，适合组件化开发。

❌ 缺点

• 不易调试，样式覆盖顺序需注意。

• 可读性略差。

示例：数组绑定多个样式对象

<template>
  <div :style="[baseStyle, dynamicStyle]" class="box">
    多样式绑定示例
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: true,
      baseStyle: {
        width: '200px',
        height: '100px',
        borderRadius: '8px',
        padding: '10px',
        textAlign: 'center'
      }
    };
  },
  computed: {
    dynamicStyle() {
      return {
        backgroundColor: this.isHighlighted ? '#ffd54f' : '#90caf9',
        color: this.isHighlighted ? '#000' : '#fff',
        boxShadow: this.isHighlighted ? '0 0 10px rgba(0,0,0,0.3)' : 'none'
      };
    }
  }
};
</script>

<style scoped>
.box {
  font-size: 16px;
  font-weight: bold;
}
</style>

4. 使用 class 配合 CSS 类名控制样式

<div :class="{ active: isActive, disabled: isDisabled }"></div>

✅ 优点

• 更适合静态样式或响应式状态切换。

• 样式写在 CSS 中，结构清晰。

• 支持多个类名组合。

❌ 缺点

• 不适合动态样式值（如颜色、尺寸）。

• 需要维护 CSS 文件。

使用 :class 控制样式示例

<template>
  <div :class="{ active: isActive, disabled: isDisabled }" class="status-box" @click="toggleState">
    状态切换示例
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isDisabled: false
    };
  },
  methods: {
    toggleState() {
      this.isActive = !this.isActive;
      this.isDisabled = !this.isDisabled;
    }
  }
};
</script>

<style scoped>
.status-box {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.active {
  background-color: #4caf50;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.disabled {
  background-color: #e0e0e0;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}
</style>

5. 使用内联 style 属性（非推荐）

<div style="color: red; background-color: blue;"></div>

✅ 优点

• 快速测试或临时样式。

❌ 缺点

• 不响应式，无法动态更新。

• 不推荐在 Vue 中使用，破坏组件化思想。

总结对比表

方法类型	动态性	可读性	适合场景	推荐程度
:style 对象字面量	高	中	简单样式绑定	⭐⭐⭐
:style 变量或计算属性	高	高	复杂样式、复用性强	⭐⭐⭐⭐
:style 数组组合	高	中	多来源样式合并	⭐⭐⭐
:class 条件类名	中	高	状态切换、静态样式控制	⭐⭐⭐⭐
内联 style	低	低	临时调试	⭐