Vue中计算属性返回含span标签内容被渲染为纯文本而非HTML的问题咨询

你使用的{{ }}双大括号插值语法默认会把绑定值作为纯文本渲染，为了防范XSS注入攻击，框架会自动转义内容里的HTML标签，所以你拼接生成的span标签不会被解析为DOM元素，直接以文本形式展示。

方案1：使用HTML渲染指令（适配你当前的字符串拼接逻辑） #

你当前的写法是Vue框架的典型语法，直接替换插值写法，用框架内置的v-html指令绑定内容即可，该指令会将返回的字符串作为真实HTML插入DOM节点：

<!-- 删除原有的 {{ spanTitle }} 写法，替换为如下代码 -->
<div v-html="spanTitle"></div>

安全提示：v-html会绕过框架自带的XSS防护机制，仅可用于渲染完全可信的内容，禁止用它渲染用户提交的、未经过滤的不可信内容，否则会存在恶意脚本注入的安全风险。

方案2：模板层循环渲染（无安全风险，更推荐） #

如果不想承担v-html带来的安全隐患，可以放弃拼接HTML字符串的思路，直接在模板层循环生成span标签，从根源避免XSS问题：

1. 调整计算属性，返回拆分后的内容片段数组：

spanFragments() {
  // 保留原正则匹配规则，用match返回匹配到的片段
  return this.title.match(/([A-Za-z0-9'<>/]+)/g) || []
  // 如果仅需要拆分单词，也可以直接用 this.title.split(' ') 按空格拆分
}

2. 模板中循环渲染span标签：

<div>
  <span v-for="(fragment, idx) in spanFragments" :key="idx">{{ fragment }}</span>
</div>

你当前写的正则匹配范围有限，如果标题中包含中文、重音字符、&符号等不在匹配规则里的内容，会出现匹配丢失的问题，如果要适配多语言场景，建议调整正则规则或者直接用空格拆分的逻辑。

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