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