vue \n无法换行 解析成空格怎么办

文本的换行符（\n）却无法正常换行，而是被替换为空格。

1. 使用CSS样式来处理文本的换行，通过设置white-space属性为pre-line

<template>
  <div class="formatted-text">{{ textWithNewline }}</div>
</template>

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

<script>
export default {
  data() {
    return {
      textWithNewline: "第一行\n第二行\n第三行",
    };
  },
};
</script>

2. 保留文本中的空白字符并渲染换行，可以使用<pre>标签

<template>
  <pre>{{ textWithNewline }}</pre>
</template>

<script>
export default {
  data() {
    return {
      textWithNewline: "第一行\n第二行\n第三行",
    };
  },
};
</script>

3. 使用<br>标签，可以使用v-html指令来解析包含HTML标签的文本，这样就可以正常渲染换行

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

<script>
export default {
  data() {
    return {
      textWithNewline: "第一行\n第二行\n第三行",
    };
  },
  computed: {
    formattedText() {
      return this.textWithNewline.replace(/\n/g, "<br>");
    },
  },
};
</script>