项目中,使用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. 三十、Linux 进程与信号——信号的概念及 signal 函数

    30.1 信号的基本概念 信号(signal)机制是Linux 系统中最为古老的进程之间的通信机制,解决进程在正常运行过程中被中断的问题,导致进程的处理流程会发生变化 信号是软件中断 信号是异步事件 ...

  2. 默认约束(DEFAULT)

    默认值 当插入记录时,如果没有明确为字段赋值,则自动赋予默认值. mysql> CREATE TABLE tb8( -> id SMALLINT UNSIGNED AUTO_INCREME ...

  3. tensorflow/core/kernels/conv_ops.cc:659] check failed: stream->parent()->getc

    tensorflow版本与cudnn版本不对应,如tensorflow-gpu==1.1.0,cudnn==6.0 升级tensorflow-gpu到更高版本

  4. c# 线程锁 ,

    using System; using System.Collections.Generic; using System.Text; using System.Threading; namespace ...

  5. spring cloud心跳检测自我保护(EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.)

    EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER ...

  6. sql连接:inner join on, left join on, right join on使用详解

    点击打开原文 inner join(等值连接) 只返回两个表中联结字段相等的行 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包 ...

  7. Python Django 实用小案例2

    动态导入模块 Django返回序列化数据  动态导入模块 在Django里面,经常会看到一些方法或者类是动态导入,尤其是以settings文件为代表,经常把一些类放在里面动态调配,比如随便拿Djang ...

  8. Eclipse 各版本号

    查看Eclipse版本号的方法:1.找到eclipse安装目录.2.进入readme文件夹,打开readme_eclipse.html.3.readme_eclipse.html呈现的第二行即数字版本 ...

  9. BootStrap表单验证用户名重复

    html: <div class="form-group"> <label for="username" class="contro ...

  10. ActiveMQ中Broker的应用与启动方式

    Broker:英语有代理的意思,在activemq中,Broker就相当于一个Activemq实例. 1. 命令行启动实例: 1.activemq start使用默认的activemq.xml启动 E ...