vue \n 换行不不显示

Vue 中，直接使用包含 \n 的字符串进行渲染时，换行符不会被识别为 HTML 的换行，因为 Vue 默认会将其视为普通文本。

对此提供两种解决办法

方法一：使用 v-html 指令替换 \n 为 <br>

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

<script>
export default {
  data() {
    return {
      originalText: "This is the first line.\nThis is the second line."
    };
  },
  computed: {
    formattedText() {
      return this.originalText.replace(/\n/g, '<br>');
    }
  }
};
</script>

在 data 中定义了 originalText，其中包含了 \n 作为换行符的字符串。
通过 computed 属性 formattedText，使用 replace(/\n/g, ‘<br>’) 方法将 \n 替换为 <br> 元素。
在模板中使用 v-html 指令将 formattedText 作为 HTML 进行渲染，这样 <br> 元素会被解析为换行效果。

方法二：使用 white-space: pre-line CSS 属性

<template>
  <div class="text-container">
    {{ originalText }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: "This is the first line.\nThis is the second line."
    };
  }
};
</script>

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

在 data 中同样定义了 originalText 包含换行符的字符串。
在模板中直接使用双花括号 {{ originalText }} 进行文本渲染。
在 style 中为包含文本的元素添加 white-space: pre-line 的 CSS 属性，它会将连续的空格合并为一个空格，并且将 \n 作为换行符进行显示。