vue v html安全,vue 中控制v-html 中的样式,但不影响全局的小技巧

我们知道在 Vue 中,style可以用两种方式来导入:

// method1

@import ('./a.css');

//method2

复制代码

但是不管哪一种,导进的css文件都是应用于全局的,有时候我们不想要这样的效果。而要使得css只对当前的组件有效,即局部应用。vue中提供了scoped属性,可以很好地解决该问题。

当我们有如下应用场景时,新的问题又出现了:

export default {

data () {

return {

}

},

props: {

mhtml: String

}

}

// some stylesheets to imploy to v-html

复制代码

该组件中的style如果设置为scoped,那么style不会应用到 v-html中,如果不设置为scoped,那么会污染全局变量,导致不可知的后果。

如何fix呢?官网给出了两个解决办法:

In single-file components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue’s template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global

对于方法一,css module是一个解决全局变量和代码依赖的规范,原理是对声明了module的样式表中的样式赋予哈希class名, 可以参考 官网以及阮一峰老师的文章

对于方法二,意思是在全局变量中,通过特殊的命名(比如说BEM)来手动约束样式显示

可惜,以上都不是我想要的解决方案

在Stack Overflow中找到了第三种解:

可以使用 deep scoped 来实现对v-html的样式应用,并且不设置为全局

代码如下:

export default {

data () {

return {

}

},

props: {

mhtml: String

}

}

.markDiv>>>h1,h2,h3,h4,h5,h6{

font-family: "PT Sans","SF UI Display", ".PingFang SC","PingFang SC", "Neue Haas Grotesk Text Pro", "Arial Nova", "Segoe UI", "Microsoft YaHei", "Microsoft JhengHei", "Helvetica Neue", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "Hiragino Sans GB", sans-serif;

text-rendering:optimizelegibility;margin-bottom:1em;font-weight:bold; line-height: 1.8rem;

}

复制代码

这样一来, 这些样式就会影响该组件的子组件,其中的v-html自然也会因之而改变,但又不会『污染』全局,很好地fix我们的问题。

那么,原理是什么呢?

我们在vue-loader的release说明 中,发现从v12.2.0开始,加了这么一个特性:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/346547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6 redis 编译失败_Centos7.8环境搭建Redis主从复制和哨兵模式

本节我们搭建Redis主从复制和哨兵模式集群,集群的好处是把数据分散不不同的服务器上,解决网站中的很多高并发,高负载等问题,很好的提高网站的性能,也能解决mysql的数据读写问题,所以我们搭建集群非常有必要…

springboot异步注解_Spring Boot 2 :Spring Boot 中的响应式编程和 WebFlux 入门

【小宅按】Spring 5.0 中发布了重量级组件 Webflux,拉起了响应式编程的规模使用序幕。WebFlux 使用的场景是异步非阻塞的,使用 Webflux 作为系统解决方案,在大多数场景下可以提高系统吞吐量。Spring Boot 2.0 是基于 Spring5 构建而成&#x…

结尾的单词_22个以“ez”结尾的西语单词,你掌握了吗?

22 palabras que terminan en -ez22个以“-ez”结尾的西语单词ntido → nitidez 清澈,透明lcido → lucidez 光亮;清楚plido → palidez 苍白;暗淡rpido → rapidez 迅速cido → acidez 酸性estrecho → estrechez 狭窄esbelto → esb…

python xlwt xlrd模块详解_python操作excel之xlrd、xlwt模块详解

python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库。 可从这里下载https://pypi.python.org/pypi。下面分别记录python读和写excel. python读excel——xlrd 这个过程有几个比较麻烦的问题,比如读取日期、读合并单…

江苏省计算机等级知识,江苏省计算机二级考试基础知识_计算机基础练习题

计算机及发展1.早期计算机的主要应用是_________。A.科学计算 B. 信息处理 C. 实时控制 D. 辅助设计2.数据库技术在信息系统中主要用于_________。A.信息采集 B. 信息存储 C. 信息传输 D. 信息检索3.中国的巨型机的典型…

java知识回顾_Java7 –回顾

java知识回顾我开始写博客文章,介绍即将发布的Java8版本中的新增功能 ,并认为我将从快速回顾一下Java7带给我们的内容开始。 Java7于2011年7月发布,被描述为“更具进化性而非革命性”。 “虽然有了一些重大改进,但并没有真正破土…

python应届生找工作在深圳_应届毕业程序员找工作,企业最看重你们这些地方

这篇文章来谈一下应届生找工作的问题,最近有很多在校大学生跟我咨询很多企业很多工作要求有工作经验,那这样没工作经验的人都去哪学经验,要求工作经验真的有必要吗?应届生毕业找工作,一直有一个困惑是什么,…

计算机模拟技术在教学上的应用,计算机模拟技术在水利工程学科试验教学中的应用...

[摘要]本文对水利工程试验教学中计算机模拟技术的应用问题进行了初步探讨,计算机模拟是一项技术,同时也是一种学习环境、教学模式、教学思想。计算机模拟教学应用的研究涉及了现代教育技术、教育心理、课程结构、教学内容的安排等多个领域。本文尝试为水…

PHP密码问题陈婷代码_PHP实现登录注册

一、首先实现一个PHP的简单登录注册的话 我们要简单的与后端定义一下接口和传输数据的方式 并且我们要有一个phpStudy服务器。第一步:当我们点击注册按钮的时候数据库要接收到客户端请求的数据 第二步:接收到数据以后服务器要处理数据:1.确定…

在Spring Boot中使用Vaadin的简介

介绍 Vaadin的工作方式依赖于服务器端渲染,因此可以自然地集成到诸如Spring之类的框架中。 Vaadin的Spring集成已经存在了一段时间,并且提供了用于在Spring容器中配置和管理Vaadin的工具,如果您希望将Vaadin与Spring Boot结合使用&#xff0c…

python如何读取数据保存为新格式_python,初学者应用实例:读取文件中的数据,将将北京时间转换成世界时间,再保存成新的CSV格式文件...

数据格式转换是科研工作中经常需要完成的任务。本程序实现了这个功能。将文本文件“TableS1.dat”中的数据读取,原文件格式为: No Date Time Mag Dis 11999/07/2505:28:39.580 21999/07/2523:06:31.940 31999/08/0601:54:40.6001.012.5 41999/08/1708:01…

哈工大三本计算机考研,纯干货【普通三本逆袭哈工大】—城市规划考研必胜经验...

【专业课】楼主就想起来什么就总结点什么吧,你们就知足吧!话说专业课是你相对来说比较吃亏的一科目(与本校学生相比较),为什么说吃亏呢?No.1:人家本校都学过,至少知道每门课的知识点是什么,每个…

excel转las文件_这3种Word、Excel格式不变的互转方法,实在太好用了

日常工作中用Word写总结、写报告,写分析,一定离不开数据支持。但在制作的过程中你一定碰到过这些问题:Excel里做的表格、图表,一复制到word就变的乱七八糟!那么,有没有什么好的方法,即省时&…

stm32编码器正反转计数程序_光电编码器接线图分析

编码器(encoder)是将信号(如比特流)或数据进行编制、转换为可用以通讯、传输和存储的信号形式的设备。光电编码器如果按信号原理来分类的话,可以分为增量型编码器和绝对型编码器。旋转编码器是一种光电式旋转测量装置,它将被测的角位移直接转换成数字信号…

jieba库词频统计_如何用python对《三国演义》、《红楼梦》等名著开展词云分析及字频统计、出场统计等工作。...

以下以《红楼梦》为例进行设计。在制作词云图及统计之前,需要下载python的几个库,wordcloud、jieba以及imageio等,我的操作系统为Windows10,IDE环境为idle,下载方式就直接搜索cmd,打开命令提示符窗口&#…

计算机学院考勤管理办法,计科学院进一步加强课堂考勤实施意见(试行)

为了加强课堂教学管理、规范教学秩序、强化学生课堂出勤率、提高课堂教学效果,进一步推动教风、学风建设,结合我院课堂教学中存在的实际问题,提出如下实施意见:一、学生必须严格按照修读课程计划表按时上课,不得迟到或…

java8的新特性_Java8的

java8的新特性Java8没有安排释放,直到2014年3月,但早期发行版本已经可用了一段时间。 一些最有趣的新功能是: 流 功能接口 默认方法 Lambdas Java时间 流 新的java.util.stream软件包包含“支持元素流上的功能样式操作的类”。 流不是一…

数学史思维导图_【学科活动】思维导图展风采,数学文化提素养——庆云县第四中学(北校区)四年级数学组活动小记...

思维无限 导我所想思维的火花跨越时空,照亮昨天、今天和明天。人类从茹毛饮血、采集狩猎到今天足不出户购遍全球,人工智能、大数据信息处理融入每个人的生活。这其中,最大的改变就是思维方式的改变。——题记思维导图又叫心智导图&#xff0c…

计算机新入学教案,计算机应用 新教案(1-6周).doc

计算机应用 新教案(1-6周)广州康大职业技术学院《计算机应用基础》课程教案计算机系(部) 教师曹丽萍:使 用 年 月 日周次班 次星期节 次教案编号12013-2-26一12经贸1班二1-22012-2-27一12经贸1班三3-4 学习内容第1章 计算机基础知识课时4教学目标专业能力1、了解计算…

python集合用法_Python 集合(Set)

集合 集合是无序、无索引的数据集。在Python中,集合用花括号包裹。 示例 创建集合: thisset {"自行车", "汽车", "高铁"} print(thisset) 注意: 集合是无序的,因此项目将以随机顺序出现。 访问集合项目 不能通过索引来访…