1.問題描述

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

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

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

2.分析原因

這是為什么呢？原因很簡單：如果圖片（img標(biāo)簽）在template中先寫出來，那么在<style>標(biāo)簽中是可以修改其樣式的。我猜，這應(yīng)該是vue編譯的規(guī)范吧，未在虛擬dom中渲染的元素?zé)o法修改樣式。

3.解決方案

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

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

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

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