vue3 style 数据绑定

在Vue.js 3中，样式数据绑定主要通过`v-bind`指令实现，它可以用来动态地设置元素的CSS类名、属性以及其他DOM特性。

### 示例：

假设我们有一个组件，需要根据某些状态来改变某个元素的样式类。下面是如何利用Vue3进行这种数据绑定的基本流程。

#### 基本步骤：

1. **创建一个新的Vue实例** 或者直接在一个脚本标签中使用`setup`模式定义组件逻辑。
2. **定义状态变量** 来控制样式变化。
3. **使用`v-bind`或简写`:`来动态绑定CSS类或其他属性**。
4. **展示结果** 到HTML模板中。

### 实现示例：

假设我们需要创建一个按钮，当按钮被点击时，其背景颜色会切换成绿色或红色，以此来指示不同的状态。

<!-- HTML 模板 -->
<template>
  <button :class="{'green': isActive, 'red': !isActive}" @click="toggleActive">
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  setup() {
    // 定义状态变量
    const isActive = ref(false);
    
    // 方法用于切换激活状态
    function toggleActive() {
      isActive.value = !isActive.value;
    }
    
    return {
      isActive,
      toggleActive,
      
      // 组件内部使用的文本
      buttonText: "Toggle Color"
    };
  },
};
</script>

在这个例子中：
- 我们使用`ref`创建了一个名为`isActive`的状态变量并将其初始化为`false`。
- `v-bind:class`语法允许我们动态地设置或取消CSS类。在这里，如果`isActive`为真，则添加`green`类；如果假，则添加`red`类。
- 当按钮被点击时调用`toggleActive()`方法以反转`isActive`的值，从而实现颜色切换效果。

### 相关问题:

1. 如何使用Vue3进行条件渲染？
2. Vue3中如何实现事件委托？
3. 如何在Vue3中使用计算属性？