如何让Vue中v-html渲染的富文本样式可修改？

本文共计367个文字，预计阅读时间需要2分钟。

1. 问题描述：在最近的Vue项目中，遇到的问题描述：v-渲染的富文本，无法在样式表中修改样式。 代码示例： div.article-context

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中渲染的元素无法修改样式。