简述如何让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 类。

发表评论

后才能评论