vue通過v-html指令渲染的富文本無法修改樣式的解決方案
更新時間：2020年05月20日 12:00:35 作者：jrue
這篇文章主要介紹了vue通過v-html指令渲染的富文本無法修改樣式的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.問題描述
在最近的vue項目中遇到的問題：v-html渲染的富文本，無法在樣式表中修改樣式。
代碼如下，div.article-context里面的圖片修改成自適應(yīng)，但是沒有任何效果。
<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標(biāo)簽）在template中先寫出來，那么在<style>標(biāo)簽中是可以修改其樣式的。
我猜，這應(yīng)該是vue編譯的規(guī)范吧，未在虛擬dom中渲染的元素?zé)o法修改樣式。
3.解決方案
解決方案1（推薦）：在updated生命周期函數(shù)中，js動態(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue級聯(lián)選擇器的getCheckedNodes使用方式
這篇文章主要介紹了vue級聯(lián)選擇器的getCheckedNodes使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
el-select如何獲取下拉框選中l(wèi)abel和value的值
在開發(fā)業(yè)務(wù)場景中我們通常遇到一些奇怪的需求,例如el-select業(yè)務(wù)場景需要同時獲取我們選中的label跟 value,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取下拉框選中l(wèi)abel和value的值,需要的朋友可以參考下2022-10-10
本文講解了如何在Linux環(huán)境中部署Vue項目,包括安裝依賴、編譯項目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細(xì)說明了使用Nginx作為靜態(tài)資源服務(wù)器和反向代理的步驟,以及進(jìn)行性能、安全性測試和備份的重要性,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了如何利用vue3實現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
這篇文章主要介紹了基于vue3.0.1beta搭建仿京東的電商H5項目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue項目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項目使用.env文件配置全局環(huán)境變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue2組件tree實現(xiàn)無限級樹形菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本文主要介紹了vue-cli5關(guān)于yarn的一個小坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
setup?用來寫組合式?API，從生命周期的角度，相當(dāng)于取代了?beforeCreate()，這篇文章主要介紹了Vue3?setup?的作用,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了Vue2路由動畫效果的實現(xiàn)代碼，可以根據(jù)不同的路徑去改變動畫的效果，有興趣的可以了解一下2017-07-07