minigrasshopper

在最近的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>

 

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-10
  • 2021-07-12
  • 2022-12-23
  • 2021-10-17
猜你喜欢
  • 2022-12-23
  • 2021-08-12
  • 2022-12-23
  • 2021-11-19
  • 2021-07-03
  • 2021-10-14
  • 2022-12-23
相关资源
相似解决方案