嘿，这个问题我碰到过好多次啦！Vue默认会把字符串里的\n当成普通文本渲染，不会解析成换行，咱们用这几个方法就能轻松搞定：

方法1：用CSS的white-space: pre-line（最推荐） #

这是最安全也最实用的方案，它会识别\n实现换行，同时自动合并连续的空格，完全符合日常排版需求。

只需要给渲染文本的元素加个样式就行：

<template>
  <!-- 绑定接口返回的文本 -->
  <div class="line-break-text">{{ apiResponseText }}</div>
</template>

<style scoped>
.line-break-text {
  white-space: pre-line;
}
</style>

把你的接口返回值（比如"Hello, \n what's up? \n My name is Joe"）赋值给apiResponseText，渲染出来就会自动换行了。

方法2：用v-html替换\n为<br>（注意安全） #

如果需要更灵活的排版，可以把换行符替换成HTML的<br>标签，再用v-html渲染。但一定要注意：如果接口返回的内容是不可信的（比如用户提交的内容），直接用v-html会有XSS风险，必须先转义特殊字符！

示例代码：

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

<script>
export default {
  data() {
    return {
      apiText: "Hello, \n what's up? \n My name is Joe"
    };
  },
  computed: {
    formattedText() {
      // 先转义HTML特殊字符，再替换\n为<br>
      const escapedText = this.apiText
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
      return escapedText.replace(/\n/g, '<br>');
    }
  }
};
</script>

方法3：用<pre>标签（适合保留原格式） #

如果你想完全保留字符串里的所有空格、换行（包括开头的空格），可以用<pre>标签，它会原样渲染文本格式：

<template>
  <pre>{{ apiText }}</pre>
</template>

不过要注意，<pre>标签默认有等宽字体和固定宽度，可能需要额外调整样式适配你的页面。

内容的提问来源于stack exchange，提问作者Tobias Schäfer