VueJS中JSON含转义HTML内容无法渲染为链接的解决方法

嘿，这个问题我之前也踩过坑！你遇到的情况是Vue默认会把文本内容做转义处理，所以catSummary里的HTML标签会以纯文本形式展示，而不是被解析成可点击的链接。

不过你后来想到的方法完全正确——用Vue的v-html指令就能轻松解决！

具体步骤： #

1. 先确保你的JSON数据已经正确导入到Vue组件中，比如：

// 示例数据
const catData = { 
  "cat": "1", 
  "catUrl": "this-is-a-url", 
  "catSummary": "This is a summary with <a href=\"http://www.a.com\">a link</a>" 
};

2. 在组件模板里，使用v-html指令绑定catSummary字段：

<template>
  <div class="cat-summary">
    <!-- 用v-html替代普通的插值语法 {{ }} -->
    <p v-html="catData.catSummary"></p>
  </div>
</template>

这样Vue就会把catSummary里的内容当作HTML来解析渲染，原本转义的<a>标签会被正常识别，变成可点击的链接。

⚠️ 小提醒：如果catSummary的内容来自用户输入或者不可信的数据源，一定要做好XSS防护，避免恶意HTML代码注入带来的安全问题！

内容的提问来源于stack exchange，提问作者Spankaroonie