Vue-2.1scoped样式冲突

默认情况:写在组件中的样式会全局生效->因此很容易造成多个组件之间的样式冲突问题

1.全局样式:默认组件中的样式会作用到全局

2.局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件

复制代码
<style scoped>  </style>

scoped原理:

1.给当前组件模版的所有元素,都会被添加上一个自定义属性data-v-hash值

区分开不同的组件

2.css选择器后面,被自动处理,添加上了属性选择器div[data-v-hash]

相关推荐
Codebee几秒前
SOLO+OODER全栈框架:图生代码与组件化重构实战指南
前端·人工智能
颜酱2 分钟前
CLI 工具开发的常用包对比和介绍
前端·javascript·node.js
Chen不旧10 分钟前
关于用户权限的设计,前端和后端都需要考虑
前端·权限
DsirNg10 分钟前
前端和运维的哪些爱
前端
7***318811 分钟前
Go-Gin Web 框架完整教程
前端·golang·gin
FinClip13 分钟前
FinClip助力银行整合多个App,打造一站式超级应用
前端
火柴就是我17 分钟前
从头写一个自己的app
android·前端·flutter
FinClip18 分钟前
小程序如何一键生成鸿蒙APP?FinClip助力企业快速布局Harmony OS生态
前端
月下点灯32 分钟前
🔄记住这张图,脑子跟着浏览器的事件循环(Event Loop)转起来了
前端·javascript·浏览器
邹小邹-AI37 分钟前
Rust + 前端:下一个十年的“王炸组合”
开发语言·前端·rust