vue渲染后端文本不换行问题

今天使用jsoup爬取了某网站的文本，然而，在vue渲染的时候出现了问题，所有段落都没有换行，段落之间的换行变成了空格。于是我在idea中输出文本，在vscode中console.log查看源码，发现，都是换行的，唯独渲染出来的文本没有换行，我开始怀疑是vue渲染不识别html中的换行符的问题。

查阅了资料，果然如此，后端返回的文本是带有\n换行符，但Vue将其插值渲染后，文本换行符显示为一个空格。

解决方法：

方法1.将字符串里的\n替换为<br>，然后用v-html指令渲染字符串。

<template>
<div v-html="content">
 {{content}}
</div>
</template>

js:
this.content= resp.data.replace(/\n/g, '<br>')

方法2. 设置css的white-space属性

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