在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式;
比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue";
<template> <div class="descBox" v-html='desc'></div> </template> <script> export default{ data(){ return { desc: "<p>I believe I can fly</p>" } } } </script> <style scoped> .descBox p{ color: blue; } </style>
这是为什么呢?原因很简单:如果p标签在template中先写出来,那么在<style></style>标签中是可以修改其样式的;
这应该是vue编译的规范吧,未在虚拟dom中渲染的元素无法修改样式;
解决方案1:在updated生命周期函数中,js动态配置样式,代码如下
updated() { $('.descBox').find('p').css('color', 'blue'); },
解决方案2:去掉style标签中的scoped属性
至于为啥可以呢?网上倒是有些解释,但是我觉得不严谨,直接上代码吧
<style>
.descBox p{
color: blue;
}
</style>