如何在Vue中处理数据库数据，将&amp解析为&

你的问题是数据库里的HTML内容被双重转义了——原本的&被转成&存在库中，Vue渲染时又把&转成了&amp，所以显示成了&。下面给你两种可行的解决办法：

方法一：用v-html直接解析HTML #

Vue的v-html指令会直接解析内容中的HTML标签和实体，能自动把&转换成&。用法很简单：

<template>
  <div v-html="yourDatabaseContent"></div>
</template>

注意：如果内容是用户提交的非可信内容，用v-html可能存在XSS风险，需要先做内容过滤。

方法二：手动解码HTML实体 #

如果不想用v-html（比如不需要保留HTML标签），可以写个工具函数解码实体：

function decodeEntities(str) {
  const parser = new DOMParser();
  return parser.parseFromString(str, 'text/html').documentElement.textContent;
}

然后在Vue里通过计算属性处理数据：

<template>
  <div>{{ decodedContent }}</div>
</template>

<script>
export default {
  data() {
    return {
      rawData: '<p><strong>What is your favorite Play &amp; Earn Mechanic?</strong></p>'
    };
  },
  computed: {
    decodedContent() {
      const parser = new DOMParser();
      return parser.parseFromString(this.rawData, 'text/html').documentElement.textContent;
    }
  }
};
</script>

这种方式会把所有HTML标签去掉，只显示纯文本和正确解析的实体。

额外建议 #

如果能修改后端逻辑，最好在数据存入数据库时就避免双重转义，直接存储正确的&或者单次转义的&，从根源解决问题。

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