在最近的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. MInio python

    # Install Minio library. # $ pip install minio # # Import Minio library. from minio import Minio # I ...

  2. Codeforces 785E. Anton and Permutation

    题目链接:http://codeforces.com/problemset/problem/785/E 其实可以CDQ分治... 我们只要用一个数据结构支持单点修改,区间查询比一个数大(小)的数字有多 ...

  3. 百度“搜索设置”之基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别

    还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下:  继续解释这两种的区别: 1.其实基于定 ...

  4. 《EM-PLANT仿真技术教程》读书笔记

    1.在系统分析过程中,必须考虑系统所处的环境,因此划分系统与环境的边界是系统分析的首要任务 2.模型可以分为物理模型和数学模型.数学模型可以分为解析模型.逻辑模型.网络模型以及仿真模型.模型可以分为离 ...

  5. mysql 和 sqlserver中备份一张表的区别

    sqlserver中备份一张表 SELECT * into qa_buglist_bak FROM qa_buglist 不管表的数据有多大,速度很快: mysql中上述语句就无效了,须得新建一张表, ...

  6. Vue技巧

    转载:https://segmentfault.com/a/1190000014085613?utm_source=channel-hottest 对自己有用,做个笔记,有兴趣可以去以上地址去看. 第 ...

  7. Android AndFix修复方式的限制

    这里阅览了很多网上关于修复的资料,一一贴在这里便于查看: https://github.com/alibaba/AndFix  这是官方处  要了解使用,一定得看看这里. http://www.jia ...

  8. 贪心 —— 今年暑假不AC

    贪心基本题, 有助于理解贪心算法的思想 #include <cstdio> #include <algorithm> using namespace std; struct P ...

  9. HTML5语义化

    转载自:https://www.cnblogs.com/fliu/articles/5244866.html 1.什么是HTML语义化? 用合理.正确的标签来展示内容,比如h1~h6定义标题,便于开发 ...

  10. 《剑指offer》第五十八题(左旋转字符串)

    // 面试题58(二):左旋转字符串 // 题目:字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部. // 请定义一个函数实现字符串左旋转操作的功能.比如输入字符串"abcde ...