vue2动态更改css属性方法大全

Vue2 动态更改 CSS 方法大全

1. 动态绑定 class

• 对象语法

  <div :class="{ active: isActive, 'text-danger': hasError }">示例</div>

  • isActive 为 true 时添加 active 类

  • hasError 为 true 时添加 text-danger 类

• 数组语法

  <div :class="[isSquare ? 'square' : 'circular', extraClass]"></div>

  • 可组合多个条件和变量

• 三目表达式

  <div :class="isBlue ? 'blue' : 'red'"></div>

2. 动态绑定 style

• 对象语法

  <div :style="{ fontSize: fontSize + 'px', color: textColor }">Hello</div>

  • fontSize 和 textColor 来自 data 或 computed

• 数组语法

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

  • 可叠加多个样式对象

• 结合事件修改

  <button @click="fontSize += 2">增大字体</button>

3. 使用计算属性 / 方法

• 计算属性控制样式

  computed: {
    dynamicStyle() {
      return {
        backgroundColor: this.isDark ? 'black' : 'white',
        color: this.isDark ? 'white' : 'black'
      }
    }
  }
  
  <div :style="dynamicStyle">动态样式</div>

• 方法动态切换

  methods: {
    toggleClass() {
      this.isActive = !this.isActive
    }
  }

4. 进阶技巧

• 结合过渡动画 ：动态 class 可与 Vue 的 <transition> 组件配合，实现平滑样式切换。

• 响应式原理：确保绑定的变量在 Vue 的响应式系统中，否则不会触发样式更新。

• 静态与动态共存：静态 class/style 与动态绑定可以同时存在，Vue 会合并它们。

总结：

• 简单条件切换 → 用 :class

• 数值/颜色等属性变化 → 用 :style

• 复杂逻辑 → 用 computed/methods 三者结合能覆盖 Vue2 中几乎所有动态样式需求。