Vue 使用v-html后內(nèi)容未能解析成html解決方法

1、vue.js中提供了v-html這個指令來解決這個問題,或者對數(shù)據(jù)對象使用{{{vm.data}}}三個大括號來包裹對象;
2、問題描述:

<div class="inner_content"  v-html="detailData.product_view">

輸入的是:


image.png

解決方案:
導(dǎo)致問題的原因是接口返回的數(shù)據(jù)中未對html的內(nèi)容做轉(zhuǎn)義,導(dǎo)致頁面輸出了HTML的代碼。

content = content.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
         .replace(/&amp;/g, '&').replace(/&quot;/g, '"').replace(/&apos;/g, "'");

將接口中返回的字符替換成對應(yīng)的HTML標(biāo)簽,然后再使用v-html進(jìn)行綁定,頁面就顯示正常了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容