vue替换实现换行

在 Vue 中实现文本换行的方法

使用 v-html 指令解析包含换行符的字符串
将文本中的 \n 替换为 <br> 标签，并通过 v-html 渲染。注意需要确保内容安全，避免 XSS 攻击。

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

<script>
export default {
  data() {
    return {
      text: '第一行\n第二行\n第三行'
    }
  },
  computed: {
    formattedText() {
      return this.text.replace(/\n/g, '<br>')
    }
  }
}
</script>

使用 CSS 的 white-space 属性

通过 CSS 的 white-space: pre-line 或 white-space: pre-wrap 保留换行符，同时合并多余空白字符。

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

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

使用 <pre> 标签保留格式

<pre> 标签会保留文本中的所有空白字符和换行符。

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

将文本拆分为数组渲染

将文本按换行符分割为数组，使用 v-for 渲染多个段落或换行元素。

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

<script>
export default {
  data() {
    return {
      text: '第一行\n第二行\n第三行'
    }
  },
  computed: {
    lines() {
      return this.text.split('\n')
    }
  }
}
</script>

使用过滤器转换换行符

在 Vue 2.x 中可以使用过滤器处理文本换行。

<template>
  <div v-html="$options.filters.nl2br(text)"></div>
</template>

<script>
export default {
  filters: {
    nl2br(str) {
      return (str + '').replace(/\n/g, '<br>')
    }
  },
  data() {
    return {
      text: '第一行\n第二行\n第三行'
    }
  }
}
</script>

每种方法适用于不同场景，根据具体需求选择合适的方式。安全考虑优先推荐 CSS 方案或数组渲染方案，v-html 需谨慎使用。