Vue-2.1scoped样式冲突

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

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

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

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

scoped原理:

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

区分开不同的组件

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

相关推荐
wordbaby13 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹17 分钟前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel24 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh39 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的1 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人1 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
xw51 小时前
移动端调试上篇
前端
伍哥的传说1 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入