Vue应用中如何正确渲染Vuex getter中的HTML符号？

方法1：使用v-html指令替代插值语法 #

Vue的{{ }}插值语法会自动转义所有HTML内容，导致 被转换为 并显示为文本。改用v-html指令可以直接解析HTML实体：

<!-- 错误写法：{{ }} 会转义HTML -->
<div>{{ getTranslations['E-mail'] }}</div>

<!-- 正确写法：v-html 解析HTML实体 -->
<div v-html="getTranslations['E-mail']"></div>

注意：确保渲染的内容是可信的（比如自己维护的翻译文本），避免引入XSS风险。

方法2：直接使用Unicode字符替代HTML实体 #

把 替换为对应的Unicode非换行空格（U+00A0），这样用插值语法也能直接显示空格：

修改Vuex getter中的数据：

{
  ...
  "E-mail": "e posta", // 直接输入非换行空格（Windows可按Alt+0160输入，Mac按Option+Space输入）
  // 或者用Unicode转义序列
  "E-mail": "e\u00A0posta"
}

之后用原来的插值语法即可正常显示：

<div>{{ getTranslations['E-mail'] }}</div>

方法3：在getter中手动转换HTML实体（可选） #

如果无法修改原始翻译数据，可以在getter中用正则把HTML实体转换为对应的字符：

// Vuex getter定义
getTranslations: state => {
  const translations = {...state.translations}; // 避免修改原状态
  // 转换 为Unicode空格
  Object.keys(translations).forEach(key => {
    translations[key] = translations[key].replace(/ /g, '\u00A0');
    // 如需支持更多HTML实体，可扩展正则规则
  });
  return translations;
}

之后用{{ }}插值即可正常显示。

内容的提问来源于stack exchange，提问作者A. Kiyan