首页 > 其他分享 >vue中scoped 在文件引入中的作用

vue中scoped 在文件引入中的作用

时间:2023-05-04 17:11:57浏览次数:50  
标签:文件 vue 组件 scoped 引入 css

首先搞清楚scoped是干啥的?scoped的引入主要是上线了样式的模块化私有化,即当前组件的样式只对当前组件起作用。
当vue组件被vue-loader解析的时候,对于style上加了scope属性的组件,会主动加上data-v-xx的属性来唯一标识当前组件,若当钱组件内部存在子组件,只有子组件的最外层会加上唯一标识属性,子组件内部不受影响。

当vue文件引入css文件时候。
想用这个css文件来单独改变el-dialog的样式

发现加上scoped,引入的css文件就无效;
加了scoped,只对当前组件生效。el-dialog相当于另外一个组件,所以是无效的。
去了 scoped就可以生效了,但同时也意味着:这个css文件会作用全局.------css内容,加上某class来单独作用于这个文件;

标签:文件,vue,组件,scoped,引入,css
From: https://www.cnblogs.com/pansidong/p/17371869.html

相关文章

  • vue this.$router.push 页面传值问题
    在修改一个别人的bug的时候发现一个问题,记录一下,vue前端页面在刷新页面后只读页面可以编辑了在前一个传值页面他的写法是this.$router.push({name:'xxx',query:{isEdit:false}});在接收的时候写的是this.isEdit=this......
  • Vue3数据无法显示/数据无法修改
    问题描述:昨天朋友问了我一个关于Vue3的问题,给他解答后,想起貌似自己当初也曾被这个问题困惑过,只不过被善用搜索引擎后找到了问题所在。现在考虑到可能有些朋友搜不到解决方法,所以现在用它的表现形式作为标题,可能更便于搜索到。现在重现一下这个问题:<divv-for="(item,idx)inl......
  • vue 原生方法实现pc端调用摄像头全屏视频考试(实时截屏上传,并提示当前环节
    <template><div><el-row><el-col:span="10"style=""><div><el-cardstyle="margin:0;padding:0;overflow-y:auto"><divstyle="width:100......
  • # vue 使用 threejs 实现实景看房效果 demo
    vue使用threejs实现实景看房效果demo关于这个threejs实现VR看房效果也超级简单,只需要提供一个思路的话就可以了其实,首先需要一个房间结构的贴图,这个贴图网上有,当然找个合适的也不好找,我找了一上午在别人的demo里面扣了一张出来,代码都是一样的,稍微说一下思路。一张全景......
  • 关于vue2中使用unocss样式无法生效的问题
    前言在维护公司一个技术栈为vue2+ts+unocss的老项目时发现unocss在开发环境和正式环境都不能生效,最先以为是插件的版本问题,排查后发现是因为项目在使用unocss时的配置没有配置完全,根据vue-cli的版本按照unocss的官方仓库里的example配置vue.config.js这是v......
  • Vue使用:内联style动态绑定backgroundImage/background
    1.直接在vue中使用style内联样式设置background或backgroundImage是无效的;比如这样写无效:<divstyle="background:url('../../assets/import/aa1.png')">内容。。。</div>2.必须使用拼接;但是直接拼接也是无效的;比如这样写无效:<div:style="{backgroundImage:'url('......
  • vue学习 第十一天 CSS3新特性 ---- 新增选择器(1、属性选择器 2、结构伪类选择
    CSS3新特性1、CSS3现状1)新增的CSS3特性有兼容性问题,ie9+才支持2)移动端支持优于PC端3.)不断改进中,应用相对广泛 2、CSS3新增选择器CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。1)属性选......
  • java基于springboot+vue非前后端分离的网上商城购物系统、在线商城管理系统,附源码+数
    1、项目介绍java基于springboot+vue非前后端分离的网上商城购物系统、在线商城管理系统,实现管理员:首页、个人中心、用户管理、商品分类管理、商品信息管理、订单评价管理、系统管理、订单管理,用户;首页、个人中心、订单评价管理、我的收藏管理、订单管理,前台首页;首页、商品信息、......
  • vue学习 第十天(2) HTML5的新特性 ----- 语义化标签(布局标签)/ 多媒体标签(video、
    目标:能够说出3~5个HTML5新增布局和表单标签能够说出CSS3的新增特性有哪些 HTML5的新特性 HTML的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。新特性都有兼容性问题,基本是IE9+以上版本......
  • vue学习 第十天(1) css高级技巧 ----CSS用户界面样式 / vertical-align属性应用
    用户界面样式 1)鼠标样式cursorli{cursor:pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 2、轮廓线outline给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边......