vue2修改组件样式

在 Vue.js 2.x 中，如果你想修改某个组件的样式，有几种常见的方式：

1. **内联样式**（Inline Styles）：可以直接在组件模板的元素上添加 `style` 标签，定义对应的 CSS 规则。例如：

   <div :style="{ backgroundColor: 'red', color: 'white' }">Hello</div>

2. **单文件组件内部样式**：可以在 `<template>` 内部使用 scoped CSS，这样可以限制样式的作用域，只对当前组件生效。使用双花括号 `{{}}` 来插入计算属性：

   <template>
     <div class="my-component" :class="{ active: isActive }">
       {{ message }}
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         isActive: false,
         message: "Hello from Vue"
       };
     },
   };
   </script>

   <style scoped>
   .my-component.active {
     background-color: red;
     color: white;
   }
   </style>

3. **CSS模块**：如果你使用的是 Vue CLI 的项目，并启用了 CSS Modules，你可以通过 `:` 取模运算符（`.local()`）来引用局部选择器，这样样式会应用到组件内部的元素：

   /* MyComponent.vue */
   <template>
     <div class="my-component local(my-component-class)">{{ message }}</div>
   </template>

   <style scoped>
     .my-component-class {
       background-color: red;
       color: white;
     }
   </style>

4. **外部样式表**：如果需要全局或部分页面共享的样式，可以将它们放在单独的 `.vue` 文件或外部 CSS 文件中，然后通过导入引用。