如何将 Vue 标签转换为可显示的 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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1624">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d995a3e16812.png" alt="NameGPT">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1624">NameGPT</a>
                            <p>免费的名称生成器，AI驱动在线生成企业名称及Logo</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="NameGPT">
                                <span>68</span>
                            </div>
                        </div>
                        <a href="/ai/1624" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="NameGPT">
                        </a>
                    </div>
                "
</code>

但是，这种方法可能导致不正确的显示，因为后台返回的 HTML 字符串已经过安全处理，其中特殊字符已被转义。

要解决这个问题，可以在使用 **v-html** 之前先对 HTML 字符串进行解码。例如，您可以使用以下 JavaScript 函数：

// 替换特殊字符
let sStr = iStr;
sStr = sStr.replaceAll("&", '&');
sStr = sStr.replaceAll(">", '>');
sStr = sStr.replaceAll("<", '<');
sStr = sStr.replaceAll(""", '"');
sStr = sStr.replaceAll("'", "'");
return sStr;

然后，您可以通过将解码后的 HTML 字符串传递给 **v-html** 指令来渲染正确的 HTML 元素：