前端技术

Vue 使用v-html后内容未能解析成html解决方法

2022-07-21  本文已影响0人  泪滴在琴上

1、vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象;
2、问题描述:

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

输入的是:


image.png

解决方案:
导致问题的原因是接口返回的数据中未对html的内容做转义,导致页面输出了HTML的代码。

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

将接口中返回的字符替换成对应的HTML标签,然后再使用v-html进行绑定,页面就显示正常了。

上一篇 下一篇

猜你喜欢

热点阅读