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編譯的規(guī)范吧，未在虛擬dom中渲染的元素無法修改樣式。

3.解決方案

解決方案1（推薦）：在updated生命周期函數(shù)中，js動態(tài)設置樣式，代碼如下：

<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屬性；至于原因？沒有仔細研究，我在使用過程出現(xiàn)富文本編輯器無法初始化的問題。

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

到此這篇關于vue通過v-html指令渲染的富文本無法修改樣式的解決方案的文章就介紹到這了,更多相關vue v-html富文本無法修改內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！