在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式;

<template>
<div class="msgHtmlBox" v-html='msgHtml'></div>
</template> <script>
export default{
data(){
return {
msgHtml: "<p>https://www.cnblogs.com/yunspider/</p>"
}
}
}
</script> <style scoped>
.msgHtmlBox p{
color: blue;
}
</style>

这是为什么呢?原因很简单:如果p标签在template中先写出来,那么在<style></style>标签中是可以修改其样式的;

这应该是vue编译的规范,未在虚拟dom中渲染的元素无法修改样式;

解决方案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>

Vue为v-html中标签添加CSS样式的更多相关文章

  1. Vuejs使用scoped(私有) style为v-html中标签添加CSS样式

    最近使用Vue框架的时候遇到一个问题,就是后台把数据写好了,而且写好的数据的某些内容是html格式的,使用Vue框架的v-html虽然可以很简单的就把数据转换成html的标签渲染在页面上,但是有些样式 ...

  2. 后端数据中含有html标签和css样式,前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  3. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  4. 044. asp.net主题之二为主题添加CSS样式和动态加载主题

    1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...

  5. Bootstrap入门(三)<p>标签的css样式

    Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中   <p>标签属性 1.“ text-left ...

  6. 怎么给当前点击的a标签添加一个样式(跳转页面后)

    怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...

  7. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

  8. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  9. 免插件为WordPress文章中标签添加内链

    给文章标签添加内链,意思就是说,如果你文章中出现了和标签一样的文字,那么这个文字就会自动成为标签链接,你点击这个链接就会查看到所有含有该标签的文章,这个能方便用户浏览,据说还利于SEO.下面说说方法: ...

随机推荐

  1. C语言 深入学习

    浮点数: x = Mx*2^Ex为一个规格化浮点数,Mx为x的尾数,Ex为x的阶码. 1e-6:表示1 * 10 ^ (-6). 编译时执行: sizeof是运算符(而非函数),在编译时执行,不会导致 ...

  2. springboot整合thymeleaf+tiles示例

    网上关于此框架的配置实在不多,因此想记录下来以防忘记 因为公司框架基于上述(公司采用gradle构建项目,楼主采用的是maven),所以楼主能少走些弯路: 1.创建springboot-maven项目 ...

  3. JS定时器时间日期钟表

    window.onload=function(){ setTime(); setInterval('setTime()',1000); } function checkTime(n){ if(n< ...

  4. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  5. Java问题解决:Java compiler level does not match the version of the installed Java project facet.

    问题原因:Java编译器级别与Facted Project 中的Java 版本设定不匹配. 解决办法:将两者设置一致 1.查看Java compiler level : 选中项目右键propertie ...

  6. springboot学习之授权Spring Security

    SpringSecurity核心功能:认证.授权.攻击防护(防止伪造身份) 涉及的依赖如下: <dependency> <groupId>org.springframework ...

  7. openModelica调试

    1打印信息 Modelica.Utilities.Streams.print(“messge”);

  8. Lambda语法篇

    函数式接口 函数式接口(functional interface 也叫功能性接口,其实是同一个东西).简单来说,函数式接口是只包含一个方法的接口. Lambda语法 包含三个部分 一个括号内用逗号分隔 ...

  9. php如何控制客户端生成缓存

    php如何控制客户端生成缓存 一.总结 一句话总结:用http消息响应头中的Cache-Control来控制客户端缓存,说的是页面本身被客户端缓存,而不是重新生成的其它的非页面缓存 响应头Cache- ...

  10. ggplot2画图

    早在N年前就听说这个包画图不错,一直没机会用,终于等到了.相比前面trendline这个包的可视化功能强大得多. ggplot2需要使用dataframe,其实就是一个N维数组, install.pa ...