美文网首页前端技术
Vue 使用v-html后内容未能解析成html解决方法

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

作者: 泪滴在琴上 | 来源:发表于2022-07-21 17:12 被阅读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进行绑定,页面就显示正常了。

    相关文章

      网友评论

        本文标题:Vue 使用v-html后内容未能解析成html解决方法

        本文链接:https://www.haomeiwen.com/subject/lkzuirtx.html