Vue-2.1scoped样式冲突

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

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

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

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

scoped原理:

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

区分开不同的组件

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

相关推荐
天生我材必有用_吴用4 分钟前
vue3实战六、外链跳转404,401等 入口
前端
天生我材必有用_吴用8 分钟前
vue3实战五、面包学,收缩菜单,暗黑高亮主题切换,全屏非全屏实现 入口
前端
WEI_Gaot12 分钟前
css的选择器和优先级
前端·css
Code额22 分钟前
ECMAScript 7~10 新特性
开发语言·javascript·ecmascript
tkt27 分钟前
Flutter 相关命令
前端
华科云商xiao徐27 分钟前
利用Ruby的Typhoeus编写爬虫程序
前端
和和和28 分钟前
前端优化都有啥
前端·面试
爱上大树的小猪29 分钟前
【前端基础】深入理解 JavaScript 展开运算符:数组合并与对象浅拷贝实战指南
前端·javascript·vue.js
普通且自信30 分钟前
领域模型 DSL 设计与实践
前端
林太白31 分钟前
学到了,强大的企业级NestJS必须了解一下
前端·后端·nestjs