:style改变vue3样式

在Vue 3中，样式更改通常通过CSS、SCSS、Sass、Less等预处理器或者是更现代的技术如CSS Modules、Vue的`v-bind:class`指令，以及Composition API中的`ref`和`useStyle`等方式来完成。以下是几种常见的方法：

1. **直接绑定**：
使用`v-bind:class`或`.class`属性可以根据条件动态地应用或移除类名，例如：

   <div v-bind:class="{ active: isActive }"></div>

2. **CSS Modules**：
如果你在项目中使用了CSS Modules，可以使用`:local-class`选择器：

   <button @click="isActive = true" :local-class="{ 'is-active': isActive }">Click me</button>

3. **CSS-In-JS** 工具（如styled-components）：
这些库允许你编写更具表达性的CSS，并且可以直接生成内联样式。例如：

   import styled from 'styled-components';
   const Button = styled.button`
     background-color: ${props => props.isActive ? '#0f0' : '#ccc'};
   `;

4. **Vue Composition API** 中的 `useStyle`：
你可以创建一个计算属性来管理样式，然后在模板上引用它：

   import { ref, computed } from 'vue';
   export default {
     setup() {
       const style = computed(() => ({
         color: isActive ? 'red' : 'blue',
       }));
       // 在模板中使用 `style` 对象
       return { style };
     }
   };