vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

vue

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

回到顶部