范围样式

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

为了将样式限制为局部的组件，我们可以使用scope该组件的属性：<style scoped>

全局样式

CSS 写在里面<style>标记在任何*.vue文件在全球范围内有效。

这意味着如果我们设置<p>标签内有粉红色背景颜色<style>标签合一*.vue文件，这会影响<p>所有标签中的*.vue该项目中的文件。

示例

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

里面的CSS样式CompOne.vue影响<p>所有三个标签*.vue文件：

<template>
  <p>This p-tag belongs to 'CompOne.vue'</p>
</template>

<script></script>

<style>
  p {
    background-color: pink;
    width: 150px;
  }
</style>

运行示例 »

范围样式

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

示例

这个<style>标记在CompOne.vue被赋予scoped属性：

<template>
  <p>This p-tag belongs to 'CompOne.vue'</p>
</template>

<script></script>

<style scoped>
  p {
    background-color: pink;
    width: 150px;
  }
</style>

运行示例 »