Vue 中 v-html 无法被 style scoped 渲染的问题

假设有这么一个 vue 组件:

<template>
   <div v-html="docPreview"/>
</template>
<style src="style.css" scoped>

</style>

这样来说,div 内的 html 的元素并不会受到 css 的影响。

原因很简单,scoped 的原理是将 template 内所有元素添加一个随机数属性(审查元素可以看到,叫做v-data-xxxxxxx),然后又把 css 里面的选择器也加上这个属性,保证元素只作用到属性上。但是 v-html 里的元素没有加上这个标签,自然不会受到影响。

怎么解决呢?首先可以直接取消 scoped,不过这样 css 也就会影响到全局了。如果不这么做的话,那就必须修改 css。

其中一种修改的办法是采用“deep选择器”。比如:

>>> p {
  font-size: 16px; /* 一般写法 */
}
>>> p {
  font-size: 16px; /* sass/less 写法 */
}

这样的话,对应的“p”就不会加上属性,可以应用到子元素。

本文转载于网络 如有侵权请联系删除

相关文章

  • UART、RS232、RS422和RS485解读

    串口通讯是硬件工程师经常接触的一个概念,你是否也分不清RS232、RS422、RS485、UART它们之间的关系,每次见到其中的一个,就像见到熟悉的陌生人,虽说认识,却不知道它有什么特点,殊途同归的感觉。先来一段网上比较精辟的总结。公交运行可以简单分成两个部分:1、车站2、公路其中车站决定了车上装什么(人),怎么发送(班次)等。当汽车跑在路上,就要遵守公路交通的规则,过桥有过桥的规则,高速有高速的规则,和车站没有关系了。回到串口通讯,其实,UART就相当于车站,而RS232/RS485则对应于公路的规则。UART,是通用异步收发传输器(UniversalAsynchronousReceiver/Transmitter),既然是“器”,显然,它就是个设备而已,要完成一个特定的功能的硬件,它本身并不是协议。那么它要完成什么功能呢?它的最基本功能,是数据收发和串并转换。也就相当于车站,决定装什么人以及怎么样把人装上去。RS232/RS485,是两种不同的电气协议,也就是说,是对电气特性以及物理特性的规定,作用于数据的传输通路上,它并不内含对数据的处理方式。比如,最显著的特征是:RS232使用

  • 使用matplotlib给女朋友画一个爱心吧,这份满满的爱意,一定要记得收下

    大家好,又见面了,我是全栈君。使用matplotlib给女朋友画一个爱心吧,这份满满的爱意,一定要记得收下1、起因女朋友总是查你的电脑,于是想到是否可以画一个爱心呢​!最后经过不懈的努力找到了一个非常简单的​实现方式,用起来看一下吧​!2、代码实现普通版​:importmatplotlib importmatplotlib.pathasmpath importmatplotlib.patchesasmpatches importmatplotlib.pyplotasplt importmatplotlib.animationasanimation frompylabimportmpl ​ mpl.rcParams['font.sans-serif']=["SimHei"]#解决乱码问题 mpl.rcParams['axes.unicode_minus']=False matplotlib.rcParams['toolbar']='None'#去除工具栏 fig,ax=plt.subplo

  • SpringBoot学习笔记(六)——分页、跨域、上传、定制banner、Lombok

    一、分页(pagehelper) pagehelper是一个强大实用的MyBatis分页插件,可以帮助我们快速的实现MyBatis分页功能,而且pagehelper有个优点是,分页和Mapper.xml完全解耦,并以插件的形式实现,对Mybatis执行的流程进行了强化,这有效的避免了我们需要直接写分页SQL语句来实现分页功能。github项目地址:https://github.com/pagehelper/Mybatis-PageHelper中文帮助:https://github.com/pagehelper/Mybatis-PageHelper/blob/master/README_zh.md1.1、快速起步1.1.1、添加依赖<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.3.0</version> <

  • MySQL死锁案例分析

    本文针对上一篇《MySQL优化案例分享》文章中提到的线上业务产生的一个死锁问题进行展开讨论,主要针对两个update操作导致的死锁的场景,借此机会正好总结下MySQL锁及分析下产生死锁的原因和解决方案;首先,针对MySQL中提供的锁种类做一个简单的总结,关于更多MySQL锁相关的内容可参考官方文档;MySQLInnoDB存储引擎提供了如下几种锁:1、共享/排他锁(S/X锁)共享锁(SLock):允许事务读取一行数据,多个事务可以拿到一把S锁(即读读并行);排他锁(XLock):允许事务删除或更新一行数据,多个事务有且只有一个事务可以拿到X锁(即写写/写读互斥);2、意向锁(IntentionLock)意向锁是一种表级别的锁,意味着事务在更细的粒度上进行加锁。意向共享锁(ISLock):事务想要获得一张表中某几行的共享锁;意向排他锁(IXLock):事务想要获得一张表中某几行的排他锁;举个例子,事务1在表1上加了S锁后,事务2想要更改某行记录,需要添加IX锁,由于不兼容,所以需要等待S锁释放;如果事务1在表1上加了IS锁,事务2添加的IX锁与IS锁兼容,就可以操作,这就实现了更细粒度的加

  • 将Hexo部署到云服务器

    前言看到群里好多人问如何将Hexo部署到云服务器。按我的思想,如果有服务器谁还用Hexo?但居然还真有人。趁着上个月白嫖的腾讯云的机器还没过期,赶紧重装个系统,来咕一篇Hexo如何部署到云服务器。开始操作这篇文章并非从安装开始的教程。此教程建立在你已经能通过http://localhost:4000/访问到你的博客的基础上进行的教程。因此并不会涉及到Node的安装与配置,Hexo的下载等。如果还没完成可以自行百度或者看我以前的一篇水文:从零开始搭建Hexo博客一、通过Git生成SSH密钥//假如没有设置git的全局信息需要先设置设置过了可以忽略 gitconfig--globaluser.name"yourname" gitconfig--globaluser.emailyouremail@example.com //生成SSH密钥 ssh-keygen-trsa-C"youremail@example.com" //禁用自动转换,这个不设置后面上传时会出现警告 gitconfig--globalcore.autocrlffalse复制然后Win

  • 性能计数器在.NET Core中的新玩法

    传统的.NETFramework提供的System.Diagnostics.PerformanceCounter类型可以帮助我们收集Windows操作系统下物理机或者进程的性能指标,基于PerformanceCounter类型的性能计数API在.NETCore下被彻底放弃。但是.NETCore程序的很多核心性能指标都会采用事件的方式发出来,具体使用的就是如下所示的这个名为RuntimeEventSource的内部类型。源代码可以从这里查看。[EventSource(Guid="49592C0F-5A05-516D-AA4B-A64E02026C89",Name="System.Runtime")] internalsealedclassRuntimeEventSource:EventSource { ... }复制我们可以利用EventListener对象监听由RuntimeEventSource发送的事件,进而得到当前的性能指标。如下所示的代码片段就是用来获取性能计数的PerformanceCounterListener类型的定义。在重写的On

  • java执行和停止Logcat命令及多线程实现

    本人在使用UiAutomator的时候,想多写一个自动收集手机log的方法,使用runtime类执行了adblogcat的方法,但是一直找不到好的方法结束这个线程,网上说有killpid的,但是这个操作起来略微麻烦了。自己也想了一个destroy线程的方法,一直不好用。提示错误信息如下:Exceptioninthread"main"java.lang.NoSuchMethodError atjava.lang.Thread.destroy(Thread.java:990) atmonkeytest.Monkey.main(Monkey.java:15)复制原因是因为:destroy()方法会摧毁线程,但是runtime使用中新建了一个子线程,所以才会报错。后来自己想了一个办法,在去读input流的时候,多加一个参数来写一个stop的方法。下面是logcat的类代码,分享出来,供大家参考。其中一个destroy的方法得直接去结束process线程,如果子线程在运行的时候,直接调用destroy方法,就会报上面的那个错误。这个是自己总结的,如有错误还请指正。pack

  • 用了几年 Python,但你可能连这个都没学透

    在Python中用的最多的可能就是import了,几乎我们写的每个Python脚本都是需要的,但这个import其实也有些讲究的,比如用不好很可能导致运行效率急剧下降,这里推荐一篇文章,对import的用法梳理得非常全面,希望对大家有帮助。“阅读本文大概需要9分钟。”作为一名新手Python程序员,你首先需要学习的内容之一就是如何导入模块或包。但是我注意到,那些许多年来不时使用Python的人并不是都知道Python的导入机制其实非常灵活。在本文中,我们将探讨以下话题: 常规导入(regularimports)使用from语句导入相对导入(relativeimports)可选导入(optionalimports)本地导入(localimports)导入注意事项常规导入常规导入应该是最常使用的导入方式,大概是这样的:importsys复制你只需要使用import一词,然后指定你希望导入的模块或包即可。通过这种方式导入的好处是可以一次性导入多个包或模块:importos,sys,time复制虽然这节省了空间,但是却违背了Python风格指南。Python风格指南建议将每个导入语句单独成行。

  • Mac下Tomcat的安装与使用

    版权声明:博客文章都是作者辛苦整理的,转载请注明出处,谢谢!https://blog.csdn.net/Quincuntial/article/details/52901460文章作者:Tyan 博客:noahsnail.com|CSDN|简书1.下载Tomcat并解压首先下载Tomcat,这不必多说,下载地址为:http://tomcat.apache.org/解压Tomcat,例如作者下载的apache-tomcat-7.0.70.zip,直接解压即可,解压后得到apache-tomcat-7.0.70文件夹。2.启动Tomcat的相关配置首先需要给Tomcat的bin目录下的sh文件赋予可执行权限,命令如下:$sudochmod755~/MyEclipse/apache-tomcat-7.0.70/bin/*.sh复制3.启动和关闭Tomcat启动和关闭Tomcat,即运行startup.sh,shutdown.sh文件有两种方式,命令如下:方法一:#启动Tomcat $cdMyEclipse/apache-tomcat-7.0.70/bin/ $shstartup.sh Usi

  • CentOS服务器,Nginx+Tomcat 上部署javaEE项目,负载均衡

    一:CentOS上Nginx的安装参考我的上一篇博客二:总的说明:1、我在根目录下建立了webapps文件夹用于放置项目文件:/webapps,我的项目文件是VindicateWallProj;2、apache-tomcat-7-1和apache-tomcat-7-2在/home文件夹下;3、nginx安装文件在/usr/local/nginx下。(1)下载tomcat,并解压缩,我这里解压缩了三份,用到的是后两个,apache-tomcat-7-1和apache-tomcat-7-2,这些基本的就不多说了。(2)进去apache-tomcat-7-1的conf文件夹下,修改server.xml,cdapache-tomcat-7-1/conf 我这里将端口改为了8099,这里appBase是你的项目文件所在的目录, 并且添加,如下代码,注意dacBase的目录<Contextpath=""docBase="/webapps/VindicateWallProj"debug="0"reloadable="true

  • 从Q学习到DDPG,一文简述多种强化学习算法

    选自towardsdatascience作者:SteeveHuang机器之心编译参与:EdisonKe、路雪本文简要介绍了强化学习及其重要概念和术语,并着重介绍了Q-Learning算法、SARSA、DQN和DDPG算法。强化学习(RL)指的是一种机器学习方法,其中智能体在下一个时间步中收到延迟的奖励(对前一步动作的评估)。这种方法主要用于雅达利(Atari)、马里奥(Mario)等游戏中,表现与人类相当,甚至超过人类。最近,随着与神经网络的结合,这种算法不断发展,已经能够解决更复杂的任务,比如钟摆问题。虽然已经有大量的强化学习算法,但似乎并没有什么文章对它们进行全面比较。每次需要决定将哪些算法应用于特定的任务时,都让我很纠结。本文旨在通过简要讨论强化学习的设置来解决这个问题,并简要介绍一些众所周知的算法。1.强化学习入门通常,强化学习的设置由两部分组成,一个是智能体(agent),另一个是环境(environment)。强化学习图示环境指的是智能体执行动作时所处的场景(例如雅达利游戏中的游戏本身),而智能体则表示强化学习算法。环境首先向智能体发送一个状态,然后智能体基于其知识采取动作

  • Prometheus jmx_exporter

    一、简介 地址:https://github.com/prometheus/jmx_exporter JMXExporter利用Java的JMX机制来读取JVM运行时的一些监控数据,然后将其转换为Prometheus所认知的metrics格式,以便让Prometheus对其进行监控采集。 那么,JMX又是什么呢?它的全称是:JavaManagementExtensions。顾名思义,是管理Java的一种扩展框架,JMXExporter正是基于此框架来读取JVM的运行时状态的。   二、K8s中监控java进程 采用javaagent的形式运行JMX-Exporter的jar包,进程内读取JVM运行时状态数据,转换为Prometheusmetrics格式,并暴露端口让Prometheus采集。 制作java镜像,导入jmx_exporter Dockerfile FROMopenjdk:8u121-alpine ​ LABELmaintainer="tunan" ​ ENVJAVA_VERSION8u121 ENVJAVA_OPTS="" ​ RUNset-x\ &&

  • 数据挖掘之决策树ID3算法

    /*决策树ID3算法思想:从根节点开始,每一步的选择决定朝下一层的哪个节点走去,到达叶子节点即是它所属的类别,举个例子:假如要判断某一天是否适合打网球,分成两类:是和否。有3个因素对其有影响,分别是天气,温度和是否有风,天气有3个值:晴,多云,有雨。温度有3个值:高,正常,低。是否有风有两个值:是和否。现在我要选择3个因素中哪一个作为根节点最好呢?这里涉及一个计算信息增益的问题,可以通过数学的相关知识得到(不具体说),如果信息增益越大,越适合作为根节点,假如现在天气的信息增益最大,那么天气因素作为根节点。并产生3个不同的分支,即天气的3个值的选择,再去递归构建子树。直到所有的属性选完或者子样本已经全部归于一类。建立好这棵树之后,现在来一组新样本,不知道它最终的分类,可以通过决策树知道他的类别。*/#include<iostream> #include<string> #include<vector> #include<map> #include<algorithm> #include<cmath> usingnam

  • 2000条你应知的WPF小姿势 基础篇&lt;45-50 Visual Tree&amp;Logic Tree 附带两个小工具&gt;

      在正文开始之前需要介绍一个人:SeanSexton.来自明尼苏达双城的软件工程师。最为出色的是他维护了两个博客:2,000ThingsYouShouldKnowAboutC#  和 2,000ThingsYouShouldKnowAbout WPF 。他以类似微博式的150字简短语言来每天更新一条WPF和C#重要又容易被遗忘的知识。Follow他的博客也有一段日子了,很希望能够分享给大家。   本系列我不仅会翻译他的每一个tip,也会加入自己开发之中的看法和见解。本系列我希望自己也能和他一样坚持下来,每天的进步才能促成伟大。   在这里郑重说明.该系列是基于SeanSexton先生的英文博客,SeanSexton拥有全部版权和撤销权利。     前文:<1-7> ,<8-14>,<15-21>,<22-27>,<28-33>,<34-39>,<40-44>     [小九的学堂,致力于以平凡的语言描述不平凡的技术。如要转

  • axios进行图片上传

    进行图片的上传,一定要注意headers的设置:       headers:{"Content-Type":"multipart/form-data"}   html                JS         请求的效果        -------------------------------------------------------------------             

  • asp.netcore5.0使用xxl-job

    书接上文go任务调器gocron和xxl-job 我们来看看asp.netcore5.0里面怎么使用,非常高兴有大佬们的贡献https://github.com/NanoFabricFX/DotXxlJob,我的xxl-job是2.2.0,按照githab上我们需要安装DotXxlJob.Core然后准备代码如下: usingDotXxlJob.Core; usingDotXxlJob.Core.Model; usingMicrosoft.AspNetCore.Builder; usingMicrosoft.AspNetCore.Http; usingMicrosoft.Extensions.DependencyInjection; usingSystem; usingSystem.Collections.Generic; usingSystem.IO; usingSystem.Linq; usingSystem.Threading.Tasks; namespaceWebApp { //声明一个AspNet的Middleware中间件,并扩展ApplicationBuil

  • 强大的float

    想要实现下面的效果,用flex搞不定,如果有其他方法,可以留言。   用float就比较简单了 div{ width:600px; height:280px; background:#CCCCCC; } img{ width:100px; height:70px; float:left; } img:first-child{ width:200px; height:140px; }复制  

  • 业务id转密文短链的一种实现思路

    业务场景: 买家通过电商app下单后,会受到一条短信,短信内容中包括改订单详情页面的h5地址连接,因为是出现在短信中,所以对连接有要求: 1.尽量短;2.安全性考虑,订单在数据库中对应的自增主键id不能暴露出来;3.url中id加密串位数要固定 解决思路: 要满足第2条要求,肯定是要对id进行某种加密后来展现到url中,其实方法有很多,可以通过把10进制id转为高进制(比如36进制)串;也可以直接对id进行md5加密。但是转换高进制的方式会位数不固定,这样不符合第3个条件。直接md5加密太长不满足条件2。鉴于此,要继续往下深入思考一下了 在搜索引擎如此发达的时代,如果什么事情都想着自己去原创,那样会显得太傻,于是,当你当前所能想出的方案不能解决问题时候,那就去度娘或者谷歌吧 于是去度娘敲下“微博短链”,深深可以借鉴,先粘上微博中url短链算法思路及代码如下: 将长网址md5生成32位签名串,分为4段,每段8个字节; 对这四段循环处理,取8个字节,将他看成16进制串与0x3fffffff(30位1)与操作,即超过30位的忽略处理; 这30位分成6段,每5位的数字作为字母表的

  • 事后诸葛亮分析

    事后诸葛亮分析-小谷围驻广东某工业719电竞大队 Teamworkproject ##一、总结的提纲内容## 1.项目管理之事后诸葛亮会议: 2.团队合照: ##二、团队成员在Alpha阶段的角色和具体贡献## 成员 软工角色 团队贡献分 可验证的贡献 何思敏 PM 20 原型、UI 刘粤轩 UI 20 各类文档 叶文涛 DEV 21 后台开发 罗展宏 DEV 20 项目部署 姚康友 DEV 20 我的社区页面 谢东洪 TEST 19 测试文档

  • 有些字划掉并不是删除线而是右斜线,在ReportMachine报表的实现

      最近项目中,因为有个字是删除的意思,但不像Word排版给设置删除线样式就可以达到的,而是要求从左上角划一直线穿过这个字到右下角。最开始想到用造字的办法,可是造字不仅麻烦,而且要为不同字体造字,并且,如果机器系统不一样,字体之间还有差异,最关键的是,造出来的字,输出为pdf打开来看时,pdf并不能显示这个造的字出来。在报表中,这个字,有可能是从数据库中出来的,输入与输出在不同机器间共享,表达就会有很大的损失,造成错漏。所以造字是行不通的办法。   报表是采用ReportMachine6.5,这是网上流传很广的源码版。通过分析发现,可以针对出现这个字的情况下,进行特殊处理。找到RM_Class.pas文件,TRMCustomMemoView.ShowMemo就是输出处理,找到文本绘制的处理_DrawOneStr,修改代码: 1procedure_DrawOneStr; 2var 3i:Integer; 4lWidth:Integer; 5str1,str2:string;///add2014/9/19 6begin 7{///在有补字上画一个右斜线} 8str1:=aStr; 9wh

  • 单调队列

    单调队列 概念 维护区间内单调的序列 滑动窗口 这道题队列维护的是数组的下标 [13-1-35367],k为3. 下面我们来求最小值 i=0,队列为空,1入队 i=1,3大于1,3入队 i=2,-1小于3,不满足单调递增,1,3出队,-1入队,这时满足k=3的条件,输出队首-1 i=3,-1大于-3,不满足单调递增,-1出队,-3入队,输出-3 i=4,5大于-3,5入队,此刻最小值还是-3 i=5,3小于5,不满足单调递增,5出队,3入队,输出-3 i=6,6大于3,6入队,此时-3的下标是3,i=6,超出了窗口的范围,弹出-3,最小值为3 i=7,7大于6,7入队,输出3 #include<iostream> usingnamespacestd; constintN=1e6+10; intqq[N],hh=0,tt=-1,a[N]; intn,k; intmain() { cin>>n>>k; for(inti=0;i<n;i++)scanf("%d",&a[i]); for(inti=0;i<n;i++)//找最小值是要维护

相关推荐

推荐阅读