这篇文章主要为大家展示了vue通过v-html指令渲染的富文本无法修改样式怎么办，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

1.问题描述

在最近的vue项目中遇到的问题：v-html渲染的富文本，无法在样式表中修改样式。

代码如下，div.article-context里面的图片修改成自适应，但是没有任何效果。

<div class="article-context" v-html="post.content"></div><style scoped>.article-context img { width: auto; height: auto; max-width: 100%; max-height: 100%;}</style>

2.分析原因

这是为什么呢？原因很简单：如果图片（img标签）在template中先写出来，那么在<style>标签中是可以修改其样式的。
我猜，这应该是vue编译的规范吧，未在虚拟dom中渲染的元素无法修改样式。

3.解决方案

解决方案1（推荐）：在updated生命周期函数中，js动态设置样式，代码如下：

<script>import $ from 'jquery'export default {updated() { $('.article-context').find('img').css({ "width": "auto", "height": "auto", 'max-width': '100%', 'max-height': '100%' });}</script>

解决方案2（不推荐）：去掉style标签中的scoped属性；至于原因？没有仔细研究，我在使用过程出现富文本编辑器无法初始化的问题。

<style>.article-context img { width: auto; height: auto; max-width: 100%; max-height: 100%;}</style>

以上就是关于vue通过v-html指令渲染的富文本无法修改样式怎么办的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。