简述如何让CSS只在当前组件中起作用 ?
在 Vue 中,我们可以通过使用 scoped
属性来让 CSS 只在当前组件中起作用。scoped
属性可以确保样式只应用于当前组件,不会影响到其他的组件。
当我们在一个 Vue 组件的 <style>
标签中添加 scoped
属性时,Vue 会自动为该组件的模板添加一个唯一的属性,比如 data-v-21e5b78
,然后在 CSS 里也添加这个属性,这样就可以确保这些样式只会应用到这个组件上。
例如:
<template>
<div class="example">Hello Vue!</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
在这个例子中,.example
类的样式只会应用到当前组件,不会影响到其他组件中的 .example
类。