v-html里面添加样式

时间:2023-03-09 08:46:26
v-html里面添加样式

项目中,使用V-html渲染的页面,要添加样式,改如何做

解决方案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>