Vue 范围样式

在组件或 App.vue 中的 <style> 标记中定义的样式实际上在所有组件中都是全局可用的。

为了使样式在本地仅限于组件，我们可以在该组件上使用 scope 属性：<style scoped>

全局样式

在任何 *.vue 文件的 <style> 标记中编写的 CSS 都可以全局生效。

这意味着，例如，如果我们在一个 .vue 文件中的 <style> 标记内设置 <p> 标记为粉红色背景色，这将影响该项目中所有 .vue 文件的 <p> 标签。

实例

在这个应用程序中，我们有三个 *.vue 文件：App.vue，以及两个组件 CompOne.vue 和 CompTwo.vue。

CompOne.vue 中的 CSS 样式会影响所有三个 *.vue 文件中的 <p> 标记：

<template>
  <p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style>
  p {
    background-color: pink;
    width: 150px;
  }
</style>

范围样式

为了避免一个组件中的样式影响其他组件中元素的样式，我们在 <style> 标记上使用了 'scoped' 属性：

实例

CompOne.vue 中的 <style> 标记被赋予了 scoped 属性：

<template>
  <p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style scoped>
  p {
    background-color: pink;
    width: 150px;
  }
</style>