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

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