v-html命令渲染的内容,使用scoped属性的情况下,样式不起作用
如:
CSS:
<style scoped>
.question_title_text img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>
HTML:
<div class="question_title_text">
<span v-html="questionTitle"></span>
</div>
JS:
questionTitle : "题目中有图片<img src='question/q_1.png' >"
不去掉scoped属性的解决方法:
1. 通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped
如:
<style scoped>
.question_title_text >>> img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>
2. >>> 在 sass | less 中不作用,用 /deep/ | ::v-deep 来代替
如:
<style scoped lang="less">
/deep/ .question_title_text img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>
<style scoped lang="scss">
::v-deep .question_title_text img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>
**注:**Vue 3 中 ::v-deep 被废除了,取而代之的是 ::deep