1、场景

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

2、错误的使用

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

3、错误效果展示

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

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

写法：<style scoped>

5、改进后的效果

6、开发提示

在进行单页面开发时、为了保证页面样式。最好在样式中加上scoped属性。只在当前页面有效果

Vue学习之--------Scoped样式（2022/8/1）的更多相关文章

Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别（2022/7/12）
文章目录 1.绑定样式 1.1 基础知识 1.2 代码实例 1.3 测试效果 2.条件渲染 2.1 基本知识 2.2 代码实例 2.3 测试效果 1.绑定样式没啥好说的.我觉得还没直接引入外部写好的 ...
Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
Vue中的scoped及穿透方法（修改第三方组件局部的样式）
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
vue子组件的样式没有加scoped属性会影响父组件的样式
scoped是一个vue的指令,用来控制组件的样式生效区域,加上scoped,样式只在当前组件内生效,不加scoped,这个节点下的样式会全局生效. 需要注意的是:一个组件的样式肯定是用来美化自己组件 ...
VUE中 style scoped 修改原有样式
作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...
Vue学习之路第十二篇：为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）
在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件提示:这里使 ...

随机推荐

npm run dev 启动项目报错我的解决办法
我的报错截屏解决方案 1. config文件中 index 文件中的 host 值如果是数字串就将其改为 localhost 2. 再次尝试如果有遇到其他问题阔以将 node-mo ...
CF280D k-Maximum Subsequence Sum(线段树)
在做这题时我一开始把\(tag\)写入了结构体 #include <iostream> #include <cstdio> #include <cstring> # ...
Luogu3855 [TJOI2008]Binary Land (BFS)
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
未关中断情况下的hardlock
最近遇到一例crash,3.10内核,hardlock,查看对应的堆栈,中断是使能的. 查看对应的hrtimer_interrupts和hrtimer_interrupt_save的值,发现确实相等. ...
Android Module配置C++支持
AndroidStudio提供了创建项目时选择C++支持的模板,但是新建Module的时候并没有C++模板, 要如何配置Module的C++支持呢? 虽然Module没有提供C++模板,但是我们可以手 ...
Electron学习（四）之应用程序打包
highlight: a11y-dark 写在前面人真的是会变得越来越懒的,也正是人的惰性吧,真的是很讽刺. 关于这个应用程序的开发,断更了很久,但是代码部分还算没落下吧,终于在周一.周二终把这个应 ...
第三十六篇:vue3响应式(关于Proxy代理对象,Reflect反射对象)
好家伙,这个有点难. 1.代理对象Proxy Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找.赋值.枚举.函数调用等). 拦截对象中任意属性的变化,包括:查get, ...
手把手教你君正X2000开发板的OpenHarmony环境搭建
摘要:本文主要介绍基于君正X2000开发板的OpenHarmony环境搭建以及简单介绍网络配置情况本文分享自华为云社区<君正X2000开发板的OpenHarmony环境搭建>,作者: 星 ...
以软件定义物联网芯片，以技术融合推动LPWAN2.0泛在物联
作为数字化产业重要的基础设施之一,物联网迎来了黄金发展期.物联网通信技术通过数据的采集.分析.输出,从浅层次的互联工具和产品深化,到成为重塑生产组织方式的基础设施和关键要素,正深刻地改变着传统产业形态 ...
C#：winform窗体实现类似QQ的窗体在桌面边缘停靠和隐藏
设计思路:1.使用定时器(Timer)来监控鼠标位置和窗体位置,并实现窗体的停靠和隐藏2.当鼠标拖动窗体时,窗体才有可能根据自身位置决定是否停靠3.如果窗体四周没有接触到屏幕边缘则不会停靠4.如果窗体 ...

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