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

最新推荐文章于 2025-05-09 16:59:48 发布

鸭绒

最新推荐文章于 2025-05-09 16:59:48 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue bug的解决方案文章标签：前端 vue.js

原文链接：https://www.cnblogs.com/hycms/p/9623655.html

vue 同时被 2 个专栏收录

31 篇文章

订阅专栏

bug的解决方案

14 篇文章

订阅专栏

本文探讨了Vue项目中使用v-html渲染富文本时遇到的样式修改难题，并提出了三种解决方案：通过JS动态设置样式、移除style标签的scoped属性以及使用深层选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在最近的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中先写出来，那么在标签中是可以修改其样式的；

这应该是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>