vue换行符

<template>
  <div>
    <!-- 使用 <br> 标签实现换行 -->
    <p>这是第一行<br>这是第二行</p>

    <!-- 使用 CSS 实现换行 -->
    <p class="line-break">这是第一行 这是第二行</p>

    <!-- 使用 v-html 实现换行 -->
    <p v-html="multiLineText"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 包含换行符的字符串
      multiLineText: '这是第一行\n这是第二行'
    };
  }
};
</script>

<style>
/* 使用 CSS 的 white-space 属性实现换行 */
.line-break {
  white-space: pre-line;
}
</style>

解释说明：

1. 使用 <br> 标签：<br> 是 HTML 中的换行标签，可以在文本中插入一个换行符。它是最直接的方式。

2. 使用 CSS 实现换行：通过设置 white-space: pre-line，可以让文本中的换行符（如 \n）生效。这种方式适合在样式中控制换行。

3. 使用 v-html 实现换行：v-html 可以将包含 HTML 标签的字符串渲染为实际的 HTML 内容。在这个例子中，\n 被替换为实际的换行效果。

希望这些示例能帮助你理解如何在 Vue 中处理换行符。