如何在Vue中使用转义字符实现HTML/CSS/JS代码的格式化输出？

你可以通过以下3种可行方案实现需求，优先推荐第三种无安全风险的方案： #

方案1：文本插值（最推荐） #

Vue的文本插值语法{{ }}会自动转义HTML特殊字符，搭配pre+code标签可直接保留换行、缩进等格式，不需要手动处理实体转义：

1. 组件内存储原始未转义的代码字符串：

export default {
  data() {
    return {
      rawCode: `<button class="btn">Button 1 - Red hover effect</button>
<button class="btn">Button 1 - Red hover effect</button>`
    }
  }
}

2. 模板内直接绑定：

<pre><code>{{ rawCode }}</code></pre>

该方案天然避免XSS风险，输出效果和你给出的原生JS示例完全一致。 #

方案2：v-html绑定已转义的代码字符串 #

如果你已经提前做好了HTML实体转义（<转<、>转>、"转"等），可以直接用v-html绑定：

1. 存储已转义的代码字符串：

export default {
  data() {
    return {
      escapedCode: '<button class="btn">Button 1 - Red hover effect</button>\n<button class="btn">Button 1 - Red hover effect</button>'
    }
  }
}

2. 模板绑定：

<pre><code v-html="escapedCode"></code></pre>

注意：该方案仅适用于代码内容完全可控的场景，避免渲染不可信的第三方代码引发XSS风险。

方案3：手动转义原始代码后渲染 #

如果你的原始代码未做转义，又需要使用v-html渲染，可以先通过工具函数手动转义特殊字符：

1. 定义转义工具函数：

function escapeHtml(str) {
  const entityMap = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  }
  return str.replace(/[&<>"']/g, match => entityMap[match])
}

2. 调用函数处理原始代码后绑定到v-html即可。

兼容注意事项 #

如果发现换行、缩进不生效，可手动给code标签添加CSS样式保证格式保留：

pre code {
  white-space: pre;
  tab-size: 2; /* 可自定义tab缩进宽度 */
}

如果需要代码语法高亮，可配合Prism.js、highlight.js等库实现。

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