Vue中解析换行展示

在 Vue 中，使用 v-html 指令渲染 HTML 内容时，\n（换行符）不会被自动转换为 HTML 的换行标签（如
）。要实现换行效果，可以使用以下几种方法：

1. 替换换行符为 <br>

在将文本传递给 v-html 之前，可以使用 JavaScript 将换行符替换为
标签。可以在计算属性中处理这个逻辑。

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

<script>
export default {
  data() {
    return {
      rawText: "这是第一行\n这是第二行\n这是第三行"
    };
  },
  computed: {
    formattedText() {
      return this.rawText.replace(/\n/g, '<br>'); // 替换换行符为 <br>
    }
  }
};
</script>

2. 使用 CSS 的 white-space 属性

如果你不想替换文本中的换行符，可以使用 CSS 的 white-space 属性来处理换行。将 white-space 设置为 pre-line，可以保留换行符并将其转换为换行。

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

&