vue3动态修改css

在Vue 3中，你可以使用内联样式或者动态绑定的类来动态修改CSS。以下是两种常见的方法：

1. 使用内联样式：

<template>
  <div :style="{ color: dynamicColor }">这是一段文本</div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const dynamicColor = ref('red');
</script>

2. 使用动态类绑定：

<template>
  <div :class="{ active: isActive }">这是一个div</div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const isActive = ref(true);
</script>
 
<style>
.active {
  color: green;
}
</style>

你也可以结合使用计算属性或方法来动态生成样式对象。

<template>
  <div :style="computedStyle">这是一段文本</div>
</template>
 
<script setup>
import { computed } from 'vue';
 
const isActive = ref(true);
 
const computedStyle = computed(() => {
  return {
    color: isActive.value ? 'green' : 'red',
    fontSize: '16px'
  };
});
</script>

以上代码演示了如何在Vue 3中根据组件的状态动态修改CSS样式。