Vue为v-html中标签添加CSS样式
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < 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动态配置样式,代码如下
1 2 3 | updated() { $( '.msgHtmlBox' ).find( 'p' ).css( 'color' , 'blue' ); }, |
解决方案2:去掉style标签中的scoped属性
scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.
解决方案3:写样式的时候添加>>>
1 2 3 4 5 | <style scoped> .msgHtmlBox >>> p{ color : blue ; } </style> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步