vue 标签转为html?

小丑的帽子
  • 132

后台返回字段如下

content: "<h3 class="descTitle"><i class="titleFlag"></i>岗位职责</h3><p class="descItem">1、负责部门所辖会计师注册内容;</p>

需要转为html如下图
image.png

但是我用v-html,效果不对,我的写法

<div v-html="content"></div>

image.png

回复
阅读 1.2k
4 个回答

先把特殊字符转义再 v-html 试试,你这个应该是做了安全过滤

function htmlDecode(iStr) {
    let sStr = iStr;
    sStr = sStr.replaceAll("&amp;", '&');
    sStr = sStr.replaceAll("&gt;", '>');
    sStr = sStr.replaceAll("&lt;", '<');
    sStr = sStr.replaceAll("&quot;", '"');
    sStr = sStr.replaceAll("&#39;", '\'');
    return sStr;
}

v-html="htmlDecode(content)"

content得先转成带尖括号的html内容

LY0528
  • 133

先对这个html字符反转义一次,可以看看DOMParser

清楚什么是 XSS 和怎么预防的前提下,可以转义下(可考虑使用计算属性),再放到v-html 指令里。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏