Vue为v-html中标签添加CSS样式

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

转载于:https://www.cnblogs.com/yunspider/p/9623655.html

Vue为v-html中标签添加CSS样式相关推荐

如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
在油猴脚本中添加css样式的方法
由于项目要求,需要在系统页面注入dom元素,且对这些注入的元素在UI界面层有美观度要求,就避免不了要对其CSS样式优化. 通常在油猴脚本中添加CSS样式的方法如下: 一.引入外部css文件 // @r ...
Vue用v-for给循环标签添加属性
Vue用v-for给循环标签添加属性用单向数据绑定v-bind:style 简写方式,在属性名前加冒号 <p class="song-lyric-item" v-for=& ...
怎么在jq中添加html样式,jquery怎么添加css样式
jquery添加css样式的方法:1.使用addClass()方法添加css样式,语法如"$(selector).addClass(class)":2.使用css()方法设置css ...
java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
JS修改标签的css样式
JS修改标签的css样式例:<span id='name'></span> js中修改id为name的span的样式 var name= document.getElemen ...
jquery使用html()css不生效,jquery可以添加css样式吗？
jquery可以添加css样式吗?答案是:可以.那么如何添加css样式?下面本篇文章就来给大家介绍一下使用jquery添加css样式的方法,希望对大家有所帮助. 在jquery中,可以使用addCla ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（）...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅甘肃蚤缀.垫状棘豆垫状驼绒藜 ...

Vue为v-html中标签添加CSS样式

Vue为v-html中标签添加CSS样式相关推荐

最新文章

热门文章