1.問題描述

在最近的vue項目中遇到的問題：v-html渲染的富文本，無法在樣式表中修改樣式。

代碼如下，div.article-context里面的圖片修改成自適應，但是沒有任何效果。

<div 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指令渲染的富文本無法修改樣式的解決方案的文章就介紹到這了,更多相關vue v-html富文本無法修改內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！