vue实现css动态

Vue 实现 CSS 动态化的方法

绑定内联样式

Vue 允许通过 v-bind:style 或简写 :style 动态绑定内联样式。可以绑定一个对象或数组，对象属性为 CSS 属性名，值为动态数据。

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    动态样式示例
  </div>
</template>

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

绑定 CSS 类

通过 v-bind:class 或简写 :class 动态切换 CSS 类。可以绑定对象、数组或字符串。

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

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

使用计算属性

对于复杂的样式逻辑，可以使用计算属性返回样式对象或类名对象。

<template>
  <div :style="computedStyles">
    计算属性样式示例
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseStyles: {
        padding: '10px',
        margin: '5px'
      },
      dynamicColor: 'blue'
    }
  },
  computed: {
    computedStyles() {
      return {
        ...this.baseStyles,
        backgroundColor: this.dynamicColor
      }
    }
  }
}
</script>

使用 CSS 变量

Vue 3 支持在模板中直接使用 CSS 变量，结合响应式数据实现动态样式。

<template>
  <div :style="{'--main-color': themeColor}">
    CSS 变量示例
  </div>
</template>

<style scoped>
div {
  color: var(--main-color);
}
</style>

<script>
export default {
  data() {
    return {
      themeColor: 'purple'
    }
  }
}
</script>

动态切换样式表

通过加载不同的 CSS 文件实现主题切换等效果。

<template>
  <div>
    <button @click="toggleTheme">切换主题</button>
    <link rel="stylesheet" :href="themePath" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDark: false
    }
  },
  computed: {
    themePath() {
      return this.isDark ? '/dark-theme.css' : '/light-theme.css'
    }
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark
    }
  }
}
</script>

使用 CSS Modules

在 Vue 单文件组件中启用 CSS Modules，可以动态访问生成的类名。

<template>
  <div :class="$style[dynamicClass]">
    CSS Modules 示例
  </div>
</template>

<style module>
.success {
  color: green;
}
.error {
  color: red;
}
</style>

<script>
export default {
  data() {
    return {
      dynamicClass: 'success'
    }
  },
  mounted() {
    setTimeout(() => {
      this.dynamicClass = 'error'
    }, 2000)
  }
}
</script>

这些方法可以根据具体需求选择使用，Vue 的响应式系统会确保样式随数据变化自动更新。