vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案
在最近的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>
以上是 vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案 的全部内容, 来源链接: utcz.com/z/379083.html