解决vue单页面修改样式无法覆盖问题

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。

比如：

<style scoped>
 .example {
 color: red;
 }
</style>

<template>
 <div class="example">hi</div>
</template>

转换结果：

<style>
 .example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>hi</div>
</template>

如果你想修改class="example"里面的span样式，你会发现是没有效果的

有两个解决办法

方法一

你可以在一个组件中同时使用有作用域和无作用域的样式：

<style scoped>
 .example{
  // ...
 }
</style>

<style>
 .example span {
  // ...
 }
</style>

方法二

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

只作用于css！！！！！！！！！！！！！！

<style scoped>
 .a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

如果是sass/less的话可能无法识别，这时候需要使用 /deep/ 选择器了。

<style lang="less" scoped>
 /deep/ .b {
 color: #000;
 }
}
</style>

总结

以上所述是小编给大家介绍的解决vue单页面修改样式无法覆盖问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue实现tab切换外加样式切换方法

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100

  • vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装  npm install rightmenu --save-dev   开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)

  • vue里面父组件修改子组件样式的方法

    在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式

  • vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active <div class="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"> 流量套餐 </div> JS 这里除了a

  • 解决vue单页面应用中动态修改title问题

    详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

  • Vue2.0点击切换类名改变样式的方法

    1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • vue cli2.0单页面title修改方法

    一.npm install vue-wechat-title --save  执行命令 二.在main.js中添加 Vue.use(VueWechatTitle); Vue.config.productionTip= false 三.在router/index.js文件中添加 routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},],

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • 当vue路由变化时,改变导航栏的样式方法

    当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co

  • 解决vue单页面修改样式无法覆盖问题

    当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局. 比如: <style scoped> .example { color: red; } </style> <template> <div class="example">hi<

  • 解决vue单页面 回退页面 keeplive 缓存问题

    场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

  • 解决vue单页面应用进入页面加载所有 js 的问题

    一般在index.js中都是这么引入的组件 import from '@/pages/my' import Cart from '@/pages/cart' import Order from '@/pages/order' import TMap from '@/pages/map' import New from '@/pages/new' 换成这样就好啦 const My = r => require.ensure([], () => r(require('@/pages/my')),

  • 浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)

    浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)

    上一篇说了vue单页面解决解决SEO的问题 只是用php预处理了meta标签 但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无到有的问题 那接下来可以更进一步的预填充内容了 预填充内容 这里依然使用php来实现 首先在php中拉取需要填充的数据,列表或是具体内容 修改拉取数据部分 $urlExp = explode('/',$_SERVER['REQUEST_URI']); if(count($urlExp)>2 && $urlExp[1] == 'article'

  • 详解在不使用ssr的情况下解决Vue单页面SEO问题

    遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面 但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面 SSR当然能解决这个问题,但是仔细想想SSR不就跟以前的.php页面一样了么 都是预先拉取所有数据然后填充返回给浏览器,需要多消耗服务器资源,而且配置繁琐

  • 解决vue单页面多个组件嵌套监听浏览器窗口变化问题

    需求 最近公司有个大屏展示项目(如下图) 页面的元素需要做响应式监听,图表需要跟着窗口响应变化 问题 每一个图表都被我写成了一个组件,然后就在每一个组件里写了一串代码,监听浏览器变化 结果只有父组件的代码生效 mounted(){ window.onresize = () => { //当窗口发生改变时触发 // }; } 原因 经简单测试后发现,同一个路由页面只能注册一次浏览器窗口监听事件,第二次注册的会覆盖第一次注册 下边代码即可测试 mounted(){ window.onresize =

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

随机推荐