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>

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

<style>
.text-container {
  white-space: pre-line; /* 保留换行符并转换为换行 */
}
</style>

3. 使用 v-for 渲染每一行

如果文本内容较为复杂，可以将文本按行分割并使用 v-for 渲染每一行。

<template>
  <div>
    <div v-for="(line, index) in lines" :key="index">{{ line }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawText: "这是第一行\n这是第二行\n这是第三行"
    };
  },
  computed: {
    lines() {
      return this.rawText.split('\n'); // 按行分割
    }
  }
};
</script>

总结

• 替换换行符: 使用计算属性将 \n 替换为
  标签。
• CSS 处理: 使用 white-space: pre-line 来保留换行符。
• 按行渲染: 将文本按行分割并使用 v-for 渲染。

选择适合你需求的方法来处理换行符。