vue组件css样式 - 使用 scoped 实现样式私有化vue组件中使用 scoped 实现样式私有化

89 阅读 0 评论 59 点赞

我是靠谱客的博主完美蓝天，最近开发中收集的这篇文章主要介绍vue组件css样式 - 使用 scoped 实现样式私有化vue组件中使用 scoped 实现样式私有化，觉得挺不错的，现在分享给大家，希望可以做个参考。

vue组件中使用 scoped 实现样式私有化

首先做一个测试
在app.vue添加h1标签，

<template>
  <div id="app">
    <h1>app.vue</h1>
  </div>
</template>

改变标签内容颜色,

`<style> h1 { color: #f00; } </style>

新建的组件users.vue中添加h1标签，

<template>
  <div class="users">
    <h1>users.vue</h1>
  </div>
</template>

改变标签内容颜色,

<style>
h1 {
  color: #0f0;
}
</style>

页面显示效果
在这里插入图片描述
users.vue中的样式设置被覆盖
此时使用scoped

<style scoped>
h1 {
  color: #0f0;
}
</style>

页面显示效果
在这里插入图片描述
在DOM中可以观察到scoped自动为组件标签添加了data-v-属性

使用scoped实现了样式私有化

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。