Vue3新属性 — css中使用v-bind（v-bind in css）

在Vue 3中，你可以使用内联样式或者CSS绑定来动态地改变元素的CSS属性。这里有一个例子，展示了如何在Vue 3中使用v-bind绑定一个CSS属性：




<template>
  <div>
    <div :style="{ color: dynamicColor }">这是一段文本</div>
    <button @click="changeColor">改变颜色</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const dynamicColor = ref('red');
 
    function changeColor() {
      dynamicColor.value = dynamicColor.value === 'red' ? 'blue' : 'red';
    }
 
    return { dynamicColor, changeColor };
  }
};
</script>

在这个例子中，我们创建了一个名为dynamicColor的响应式引用，并通过v-bind将其绑定到div元素的style属性上。当点击按钮时，changeColor函数会被触发，从而改变dynamicColor的值，进而更新元素的颜色。

Vue3新属性 — css中使用v-bind（v-bind in css）

评论已关闭

推荐阅读