如何在Vue中使用動態CSS

開發過程中，有需要通過script去動態修改css樣式中某些屬性值，比如 主題切換。

v-bind

<style>標記支援使用v-bind 將CSS值連結到元件狀態

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>
 

同樣適用於vue3 何 less的組合

這裡v-bind() 中必須使用引號。

<template>
  <div class="text">hello</div>
</template>

<script>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    const theme = reactive({
      color: 'red'
    })
    return {
      theme
    }
  }
})
</script>

<style lang="less" scoped>
.text {
  color: v-bind('theme.color');
}
</style>
 

還可以動態修改theme中color的值，介面也是可以動態發生變化。