vue2 css内部样式覆盖行内样

在Vue.js 2.x中，CSS内部样式通常指的是直接在HTML元素上使用的`style`属性定义的样式。如果你想覆盖这些行内样式，Vue的单文件组件(SFC)中可以采用以下策略：

1. **优先级规则**：内联样式（行内样式）的优先级通常高于外部样式表和内联`<style>`标签中的样式。如果你想要覆盖行内样式，需要增加你的CSS选择器的权重，比如使用`:scope`伪类（如果在 scoped 模式下），或者给元素添加一个更具体的类名。

<div :style="{ color: 'red', backgroundColor: 'blue' }" class="custom-class">内容</div>

然后在外部样式表中定义：

.custom-class {
  color: red !important; /* 使用!important提升优先级 */
}

2. **作用域**：在Vue的模板中，如果使用了`.vue`文件并启用了 scoped 模式（默认开启），那么你可以利用`this.$el`获取元素，然后动态设置其内部样式。

export default {
  methods: {
    changeStyle() {
      this.$el.style.color = 'red';
    }
  }
}

3. **Vue的`v-bind:class`或`v-bind:style`指令**：通过动态绑定类或样式，可以根据数据变化实时更新样式，这比直接操作`style`属性更易管理和维护。

<div v-bind:class="{ inlineStylesApplied: shouldApplyStyles }">
  ...
</div>

<style>
.inlineStylesApplied {
  color: red;
}
</style>