Vue-scoped(局部)样式使用方法及实例代码
更新时间：2023年05月02日 09:26:28 作者：小花皮猪
这篇文章主要介绍了Vue-scoped(局部)样式使用方法及实例代码，文中示例代码介绍了的非常详细感兴趣的同学可以参考阅读一下
scoped(局部)样式
scoped是在脚手架有一个编写样式的小技巧
作用：让样式在局部生效，防止冲突
1 编写案例
现在有两个组件，一个student,一个school，现在想给组件写点样式
这里只给个背景色
没问题，样式生效
2 样式冲突
在组件中写的样式，最后会汇总到一起，哪怕写了100个组件，这100的组件的样式也都是汇总到一起的，这样可能就会出现问题，比如类名冲突，下面我就演示一下
注意看，我这里有两个组件，组件的样式都叫test，但是样式不同，然后我让这两个组件的class相同
发现出现了样式冲突，哪个组件先被引入，就会被后者给替换掉，也就是后者代替前者的样式
传统解决办法
如果想避免冲突，传统的解决办法是让样式名称不同，但是有点不现实
vue解决办法
vue给我们提供了解决办法，可以使用scoped属性，表示当前这个样式只适用于当前的组件
3 特别注意：APP组件
scoped虽然好用,但是也不是适用于全部组件的，有一个人就比较特殊，那就是App
因为App是全部组件之父，一般在App里面写的样式，都是组件可以复用的，这时候给App组件声明scoped就不合适了
所以App组件一般不使用scoped,如果有的样式是App里面独有的，那么是可以使用的
4 总结
scoped样式
作用：让样式在局部生效，防止冲突
到此这篇关于Vue-scoped(局部)样式使用方法及实例代码的文章就介绍到这了,更多相关Vue-scoped(局部)样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue金融数字格式化(并保留小数) 数字滚动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇在vue中v-bind使用三目运算符绑定class的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决方法2020-01-01
vue element-ui里的table中表头与表格出现错位的解决
这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了Vue实现下拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
cross-env 是一个非常实用的 Node.js 包,它允许你跨平台（Windows, macOS, Linux）使用环境变量,这对于在不同的操作系统上运行脚本时保持一致性非常有用,这篇文章主要介绍了vue cross-env使用和配置方法,需要的朋友可以参考下2024-08-08
这篇文章主要为大家介绍了Vue cli3 chainWepack使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
防抖和节流的作用都是防止函数多次调用，下面这篇文章主要给大家介绍了关于vue函数防抖与节流的正确使用方法，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了ant-design-vue动态表格合并案例，文章围绕主题通过案例详解展开相关内容，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要为大家详细介绍了vue element实现表格合并行数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论