在 vue 中,v-html 指令可以动态地将 html 字符串渲染到 dom 中。然而,当您尝试将 HTML 字符串显示为实际的 HTML 元素时,可能会遇到问题。
让我们考虑这样一个例子:
<p>后台返回字段如下</p> <pre class="brush:php;toolbar:false"><code> content: "<strong>岗位职责</strong><p>1、负责部门所辖会计师注册内容;</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>" </code>
登录后复制
为了将其渲染为实际的 HTML 元素,您可能尝试使用 **v-html**:
但是,这种方法可能导致不正确的显示,因为后台返回的 HTML 字符串已经过安全处理,其中特殊字符已被转义。 要解决这个问题,可以在使用 **v-html** 之前先对 HTML 字符串进行解码。例如,您可以使用以下 JavaScript 函数:
登录后复制
// 替换特殊字符 let sStr = iStr; sStr = sStr.replaceAll("&", '&'); sStr = sStr.replaceAll(">", '>'); sStr = sStr.replaceAll("<p>}</p><pre class="brush:php;toolbar:false"> 然后,您可以通过将解码后的 HTML 字符串传递给 **v-html** 指令来渲染正确的 HTML 元素:
登录后复制
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容