vue项目回显文本无法识别换行符

解决方法

1：使用<br/>替换文本中的\n，使用v-html渲染

<template>
<div v-html="str"></div>
</template>
<script>
let str = '以下内容自动换行\n换行了'
// 使用replace截取提换
this.str = str.replace(/\n/g,'<br>'); 
</script>

2：使用style定义文本white-space属性

<div style="white-space: pre-wrap">{{'以下内容自动换行\n换行了'}}</div>

3：使用pre标签替换原标签

<pre>{{'以下内容自动换行\n换行了'}}</pre>

pre标签的作用 预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。以及pre包含其它HTML标签和CSS样式可以不被浏览器解析。所以，通常也用于显示代码