溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了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指令渲染的富文本無法修改樣式怎么辦的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
