vue3新特性v-bind in CSS

在Vue 3中，你可以使用v-bind直接在CSS中绑定表达式。这样可以让你在样式绑定中使用Vue的响应式数据。

以下是一个简单的例子，演示如何在Vue 3中使用v-bind来绑定CSS属性：

<template>
  <div>
    <div :style="{ color: dynamicColor }">This text is dynamically colored.</div>
    <div :class="{ active: isActive }">This div has an active class.</div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const dynamicColor = ref('green');
    const isActive = ref(true);
 
    return { dynamicColor, isActive };
  }
};
</script>
 
<style>
.active {
  background-color: yellow;
}
</style>

在这个例子中，dynamicColor 和 isActive 是响应式的数据，它们的变化会直接反映在绑定的元素上。dynamicColor 控制文本的颜色，而 isActive 切换 .active 类的应用，从而改变背景色。