项目中,使用V-html渲染的页面,要添加样式,改如何做

解决方案1:在updated生命周期函数中,js动态配置样式,代码如下:

 updated() {
$('.msgHtmlBox').find('p').css('color', 'blue');
},

解决方案2:去掉style标签中的scoped属性(我用的这种)

scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.

解决方案3:写样式的时候添加>>> (这种打包的时候会报错)

 <style scoped>
.msgHtmlBox >>> p{
color: blue;
}
</style>

v-html里面添加样式的更多相关文章

  1. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  2. 为html.EditorFor添加样式

    有网友问及,怎样为html.EditorFor添加样式. 解决方法,可以参考下面语法: 先new一个htmlAttributes. @model Book @using Insus.NET.Model ...

  3. JQuery为元素添加样式

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  4. JavaScript 应用开发 #5:为完成的任务添加样式

    判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...

  5. HTML添加样式三种办法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Javascrip动态添加样式,Dom操作,获取自定义属性

    var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...

  7. 原生js移除或添加样式

    样式效果如下,点击商品详情 添加样式active 代码 <!doctype html> <html lang="en"> <head> < ...

  8. React使用Styled-Componets来添加样式

    React使用Styled-Componets来添加样式 Styled-Comonents是用JS中ES6 语法的方式来管理CSS样式的一个组件,解决了在import CSS文件时样式重复 安装 项目 ...

  9. 原生js动态添加style,添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

随机推荐

  1. springboot10-springcloud-eureka 服务注册与发现,负载均衡客户端(ribbon,feign)调用

    创建5个项目: 1.服务注册中心 2.服务提供者1 3.服务提供者2(与服务提供者1的代码实现一样,这是是为了模拟负载均衡) 4.ribbon客户端项目 5.feign客户端项目 如图: 一.注册中心 ...

  2. python 中: lambda

    lambda 定义了一个匿名函数,是代码更简洁 lambda x:x+1和def g(x): return x+1是相同的哦. python 中的map,filter, reduce 函数为序列内置函 ...

  3. 三层结构与MVC

    实验室学弟突然又谈到了三层结构与MVC的话题,想想还是有必要整理一下这些个基本概念,且也纠正自己之前对二者的概念混淆,乃至将其错误思想指导于开发中. 关键词:三层结构(三层架构).MVC框架(思想). ...

  4. luogu P4091 [HEOI2016/TJOI2016]求和

    传送门 这一类题都要考虑推式子 首先,原式为\[f(n)=\sum_{i=0}^{n}\sum_{j=0}^{i}S(i,j)*2^j*j!\] 可以看成\[f(n)=\sum_{j=0}^{n}2^ ...

  5. Java基础_0308:String类的常用方法

    取出指定索引的字符 -- 使用charAt()方法 public class StringDemo { public static void main(String args[]) { String ...

  6. package-lock.json和package.json区别

    package.json里面定义的是版本范围(比如^1.0.0),具体跑npm install的时候安的什么版本,要解析后才能决定,这里面定义的依赖关系树,可以称之为逻辑树(logical tree) ...

  7. requirements.txt文件教程

    方法有2种,命令都是一样,只是执行地方不一样 此方法主要用于迁移新环境使用,为防止代码出现问题,最好使用原装库,所以就有了迁移代码和库的操作 第一种:在pycharm中,左下角有个双重正方形,点击里面 ...

  8. 20165325《Java程序设计》第九周学习总结

    一.教材学习笔记 ch13 1.URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用URL创建对象的应用程序称作客户端程序. 一个URL对象通常包含最基本 ...

  9. Windows中Anaconda,Tensorflow 和 Pycharm的安装和配置

    Anaconda完全入门指南 https://www.jianshu.com/p/eaee1fadc1e9                 [安装不要按此条链接进行] Windows中 Anacond ...

  10. Mysqli扩展类

    Mysqli 扩展是需要php5.0版本以上的支持 主要有以下的3个类 MySQLi类,基本操作 MySQL_STMT类,预处理操作 MySQLi_RESULT类,结果操作 Mysqli的编写有两种方 ...