vue通過v-html指令渲染的富文本無法修改樣式的解決方案
更新時間：2020年05月20日 12:00:35 作者：jrue
這篇文章主要介紹了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編譯的規(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富文本無法修改內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue+element?upload上傳帶參數(shù)的實例
這篇文章主要介紹了vue+element?upload上傳帶參數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
因為本人使用的是webstorm2016 2.3版本，結果竟然不支持vue文件，所以找到了一個解決方法，下面這篇文章主要給大家介紹了關于webstorm添加vue支持的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要給大家介紹了關于Vue中xlsx的使用方法指南,有很多辦法都可以實現(xiàn),其中最簡單的還是使用插件xlsx,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
使用vue與jquery實時監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實時監(jiān)聽用戶輸入狀態(tài)，實現(xiàn)效果是input未輸入值時，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧2017-09-09
vue 動態(tài)設置img的src地址無效,npm run build 后找不到文件的解決
這篇文章主要介紹了vue 動態(tài)設置img的src地址無效,npm run build 后找不到文件的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了前端Vue2、Vue3和不同版本nuxt的插槽使用的相關資料,Vue2和Vue3中,插槽機制允許在組件模板中定義占位符,并在使用組件時插入自定義內容,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
基于Vue3和Element Plus實現(xiàn)可擴展的表格組件
在開發(fā)過程中,我們經常需要創(chuàng)建具有復雜功能的表格組件,本文將介紹如何使用 Vue 3 和 Element Plus 庫來構建一個可擴展的表格組件,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關于利用jsx寫vue組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
這篇文章主要介紹了vue-axios的使用以及axios請求賦值為空的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue elementUI table 自定義表頭和行合并的實例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05