vue项目中字符串换行显示方式(返回的数据包含‘\r\n’字符)

当Vue项目返回的数据有含有“\r\n”字符时，在界面上展示可能会出现一些问题。正确的处理方式是将字符串换行进行显示。

解决方案

1. 使用CSS white-space属性

在需要换行的元素上使用CSS white-space属性，将其设置为pre-wrap或者pre-line。这样可以让元素内的文本在包含“\r\n”字符时自动换行并展示。

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

<style scoped>
.text-wrap {
  white-space: pre-wrap;
}
</style>

2. 使用computed计算属性

通过创建computed属性，在获取数据时，将文本中的“\r\n”替换成“
”标签，这样就能够展示出换行的效果了。

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

<script>
export default {
  data() {
    return {
      content: ""
    }
  },
  computed: {
    formattedContent() {
      return this.content.replace(/\r?\n/g, "<br/>");
    }
  }
}
</script>

这样，当获取到的数据中含有“\r\n”字符时，就会自动将其替换为布局符的
标签，从而实现换行的效果。

总结

以上两种方法都能够实现在Vue项目中展示带换行的文本内容。其中，推荐使用第二种方法，这种方法可以增加代码的可读性和可维护性，同时也可以使代码更加清晰。