vue 实现动态样式

在Vue中实现动态样式可以通过多种方式实现，以下是一些常见且灵活的方法：

绑定内联样式

使用v-bind:style（或简写:style）直接绑定样式对象，对象中的属性可以是动态的。例如：

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
    动态样式文本
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

绑定类名

通过v-bind:class（或简写:class）动态切换类名，适合预定义多种样式场景：

<template>
  <div :class="{ 'active': isActive, 'error': hasError }">
    类名动态绑定
  </div>
</template>

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

计算属性生成样式

通过计算属性返回动态样式对象或类名，适合逻辑复杂的场景：

<template>
  <div :style="computedStyle">计算属性控制样式</div>
</template>

<script>
export default {
  data() {
    return {
      baseSize: 14,
      multiplier: 2
    }
  },
  computed: {
    computedStyle() {
      return {
        fontSize: `${this.baseSize * this.multiplier}px`,
        fontWeight: 'bold'
      }
    }
  }
}
</script>

动态CSS变量

结合CSS变量和Vue数据绑定实现更灵活的样式控制：

<template>
  <div class="dynamic-vars" :style="cssVars">CSS变量动态样式</div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '#42b983',
      spacing: '20px'
    }
  },
  computed: {
    cssVars() {
      return {
        '--primary': this.primaryColor,
        '--spacing': this.spacing
      }
    }
  }
}
</script>

<style>
.dynamic-vars {
  color: var(--primary);
  padding: var(--spacing);
}
</style>

响应式样式切换

根据条件或用户交互动态修改样式：

<template>
  <div>
    <button @click="toggleStyle">切换样式</button>
    <div :class="{ 'highlight': isHighlighted }">点击按钮切换样式</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: false
    }
  },
  methods: {
    toggleStyle() {
      this.isHighlighted = !this.isHighlighted
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
  transition: background 0.3s;
}
</style>

以上方法可根据实际需求组合使用，Vue的响应式特性能够确保样式随数据变化自动更新。对于大型项目，建议将样式逻辑封装到组件或Composable函数中以提高可维护性。