vue 换行符

<template>
  <div>
    <!-- 使用 v-html 指令来解析包含换行符的字符串 -->
    <p v-html="formattedText"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 原始文本，包含换行符 \n
      rawText: "这是第一行\n这是第二行\n这是第三行"
    };
  },
  computed: {
    // 将换行符 \n 替换为 <br> 标签，以便在 HTML 中正确显示换行
    formattedText() {
      return this.rawText.replace(/\n/g, '<br>');
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. 模板部分：使用 v-html 指令将计算属性 formattedText 的值解析为 HTML 内容。v-html 可以直接渲染 HTML 字符串。
2. 脚本部分：
   • rawText 是一个包含换行符 \n 的字符串。
   • formattedText 是一个计算属性，它将原始文本中的换行符 \n 替换为 <br> 标签，这样在浏览器中可以正确地显示换行。
3. 样式部分：这里没有特别的样式，你可以根据需要添加。

这种方式适用于需要在 Vue 组件中处理包含换行符的文本并正确显示的情况。