vue实现文本换行

Vue 实现文本换行的几种方法

在 Vue 中实现文本换行可以通过多种方式，以下是常见的几种方法：

使用 CSS 的 white-space 属性

通过 CSS 控制文本的换行行为是最简单的方式。例如，设置 white-space: pre-line 可以保留文本中的换行符：

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

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

使用 v-html 指令

如果文本中包含 HTML 的换行标签（如 <br>），可以使用 v-html 指令渲染：

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

<script>
export default {
  data() {
    return {
      text: '第一行\n第二行',
      formattedText: '第一行<br>第二行'
    };
  }
};
</script>

使用过滤器或方法处理文本

可以通过自定义过滤器或方法将换行符转换为 HTML 的 <br> 标签：

<template>
  <div v-html="formatText(text)"></div>
</template>

<script>
export default {
  methods: {
    formatText(text) {
      return text.replace(/\n/g, '<br>');
    }
  },
  data() {
    return {
      text: '第一行\n第二行'
    };
  }
};
</script>

使用 <pre> 标签

如果需要保留文本中的所有空格和换行符，可以使用 <pre> 标签：

<template>
  <pre>{{ text }}</pre>
</template>

注意事项

• 使用 v-html 时需注意 XSS 攻击风险，确保文本来源可信。
• 如果文本中包含用户输入，建议对内容进行转义处理。
• 对于动态生成的文本，推荐使用方法或过滤器处理换行符。