scoped

scoped

scoped

scoped

在style上面写 scoped

css module

在组件.vue的style标签加上scoped属性

1

scoped

2

css module

3

css in js

作用域样式（Scoped Styles）：

在单文件组件（.vue 文件）中使用 <style> 标签，并为其添加 scoped 属性。

<style scoped>
/* 在这里编写组件的样式 */
</style>

使用作用域样式后，样式规则将被自动添加一个唯一的属性选择器，以确保样式仅应用于当前组件中的元素。

CSS 模块（CSS Modules）

在单文件组件中使用 <style> 标签，并将其设置为 module。

<style module>
/* 在这里编写组件的样式 */
</style>

使用 CSS 模块后，样式将被自动转换为局部作用域，并生成一个唯一的类名，只在当前组件中有效。在组件的模板中，可以通过绑定类名的方式使用这些样式。

<template>
  <div :class="$style.myComponentStyle">...</div>
</template>

< style scoped></style>