vue实现数据换行

在 Vue 中实现数据换行的方法

使用 v-html 指令

将需要换行的数据中的换行符 \n 替换为 <br> 标签，并通过 v-html 指令渲染：

<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>

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

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

使用 <pre> 标签

<pre> 标签会保留文本中的空格和换行符：

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

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

使用过滤器

创建自定义过滤器来处理换行符：

<template>
  <div>{{ text | nl2br }}</div>
</template>

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

使用第三方库

可以使用像 vue-sanitize 这样的库来处理 HTML 内容，确保安全地渲染换行符：

import VueSanitize from "vue-sanitize";

Vue.use(VueSanitize);

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

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

以上方法可以根据具体需求选择使用，v-html 和 CSS 方法较为常用且简单。