Vue学习之--------Scoped样式（2022/8/1）

Vue学习之--------Scoped样式（2022/8/1）

1、场景

一个页面开发团队进行页面的开发设计、无可避免的会发生样式选择器命名的重复（id的重复、class的重复等）。这样间接导致的后果就是、自己的页面样式好好的、在整合一起的时候、可能就会发生样式的错乱、怎样解决这个问题呢？ 很简单、在vue中单页面文件样式中加上​​scoped​​

2、错误的使用

假设现在编写的组件使用了相同的class命名。在进行页面设计时、想要达到的效果是、组件有自己的样式

3、错误效果展示

4、改进 在style标签中加上scoped属性

作用：让样式在局部生效，防止冲突。写法：​​