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>