Vue中如何实现后端返回数据在前端显示换行？

问题原因 #

后端返回的hash字段里的\n是转义后的字符串（实际存储为\\n），并非原生换行符，导致你的nl2br函数无法识别这些转义字符，自然没法替换成<br>。而本地写的字符串"mik\nmik\nbro"里的\n是原生换行符，所以能被正常处理。

解决方案 #

1. 修正nl2br函数，先处理转义换行符 #

先把字符串里的\\n替换成原生换行符，再做<br>替换：

function nl2br(str) {
  // 先将转义的\\n转为原生\n
  const rawStr = str.replace(/\\n/g, '\n');
  // 再将\n替换为<br>标签
  return rawStr.replace(/\n/g, '<br>');
}

2. 用v-html渲染处理后的内容 #

{{ }}会把HTML标签转义成纯文本，必须用v-html才能解析<br>实现换行：

<p v-for="data in dataFromBackend" :key="data.id" v-html="nl2br(data.hash)"></p>

3. 无HTML处理的CSS方案 #

如果不想生成HTML标签，也可以用CSS让换行符生效：

<p 
  v-for="data in dataFromBackend" 
  :key="data.id" 
  style="white-space: pre-line;"
>
  {{ data.hash.replace(/\\n/g, '\n') }}
</p>

white-space: pre-line会识别原生换行符并换行，同时自动合并多余空格，适配场景需求。

快速验证 #

可以在控制台打印data.hash，如果输出是#ghost\n#mik\n#bro（显示转义字符串），就说明确实是转义导致的问题。

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