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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Vue为v-html中标签添加CSS样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。