＜style scoped＞跟＜style＞有什么区别

安＿2025-12-21 14:43

在 Vue.js 中，style scoped 和 style 标签的主要区别在于样式的作用范围和应用方式。

scoped 只作用于当前组件，未添加scoped 表示是全局的

bash 复制代码

 <style>
* 全局样式：使用未带 scoped 的 
* <style> 标签时，样式是全局的。这意味着样式会应用于所有组件中的相应元素，可能会影响到其他组件的样式。例如：
* <template>  
*   <div class="example">这是一个示例</div>  
* </template>  
* 
* <style>  
* .example {  
*   color: red; /* 此样式是全局的 */  
* }  
* </style>

在这个例子中，如果有其他组件也定义了 .example 类，所有这些组件中的 .example 都会变成红色。

bash 复制代码

2. <style scoped>
局部样式：添加 scoped 属性后，样式变为局部样式。这意味着这些样式只会应用于该组件的模板中的元素，而不会影响到其他组件。
<template>  
  <div class="example">这是一个示例</div>  
</template>  

<style scoped>  
.example {  
  color: red; /* 此样式只作用于当前组件 */  
}  
</style>

实现原理
当使用 scoped 属性时，Vue 会自动为这些样式添加一个独特的属性（通常是一个 data-* 属性），并在编译的 CSS 中生成对应的选择器。
例如：

bash 复制代码

.example[data-v-abc123] {  
  color: red;  
}