vue3如何设置动态样式

Vue3中设置动态样式通常使用的是`v-bind:class` 或者 `ref`配合`vue 自定义指令`来实现。这里有两个常见的方法：

1. **v-bind:class**:
使用模板的`v-bind:class`属性可以绑定一个对象到元素的class名，对象的键值对应CSS类名。动态更新数据会自动触发视图的更新。

<template>
  <div :class="{'active': isActive}">内容</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false // 这里是你的变量，可以根据业务需求改变其值
    };
  }
};
</script>

2. **Ref 和自定义指令**:
如果需要更复杂的条件判断或计算，可以使用`ref`存储数据，并结合自定义指令如`v-if-class`或`v-style`来实现动态样式。

// 定义一个ref
import { ref } from 'vue';

const styleRef = ref({});

// 模板中使用
<div v-style="styleRef.value">
  内容
</div>

// 更新样式
this.styleRef.value = {
  color: this.isActive ? 'red' : 'black',
  fontSize: this.isActive ? '16px' : '14px'
};