.vue文件 加scoped 样式不起作用的解决方法
浅谈关于.vue文件中的style的scoped属性注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响。 1、在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度。 一、创建公共组件button:浏览器渲染后的button组件为: 从上面的结果可以看出,添加了scoped属性的组件,做了如下操作: (1)、给HTML的DOM节点增加一个不重复的data属性。(如:data-v-2311c06a) (2)、在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如:data-v-2311c06a)来私有化样式。 二、在 " 不使用 " scoped的组件中引用button组件:浏览器渲染出来的结果是: 虽然,在content组件中修改了button的border-radius属性,但是由于权重关系,生效的依然是组件内部的样式(即.button[data-v-2311c06a]定义的样式), 如果此时仍需修改样式,则鼻血加重我们需要修改的样式的权重。 三、在 " 使用 " scoped的组件中引用button组件:浏览器渲染的结果是: 虽然,我们在content添加了scoped属性,但是.content .button 这句末尾添加的是content的scoped标记,最后我们实际上是找不到向对应的DOM节点的,也就不起作用啦。 解决办法:在content.vue文件中添加两个style样式: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- xml – xsd:dateTime到Java OffsetDateTime
- ios – google admob undefined symbol for architecture a
- 是否有通用方法通过C#中的反射填充各种泛型集合?
- 使用emscripten从标准输入读取会得到不存在的换行符
- ajax动态赋值highcharts柱形图
- Flex——HelloWorld
- SWIFT UITableview根据内容设置autoheight – XCode – iOS
- 正则表达式验证日期
- c# – 我应该使用System.Security.Cryptography命名空间中的
- objective-c – 查找可用的USB设备Mac OS X
- AJAX 跨域请求 - JSONP获取JSON数据
- 深入理解Flash Player的安全域(Security Domain
- cocostudio打包时提示ANT_ROOT not defined. Ple
- C#’select count’sql命令错误地从sql server返
- oracle导入导出数据的几种方式
- ruby-on-rails – 每当cron作业不在rails 3中工作
- ruby-on-rails-3 – 为什么Rails ActiveRecord最
- c – 是否有理由从/中使用std :: int64_t from /
- RE2正则表达式库的Windows移植
- ios – 在Xcode版本4.5.2(4G2008a)捆绑包中找不到