在最近的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
时间: 2024-10-13 16:33:08