Vue将所展示文本内容的换行与空格显示出来
- 使用
<pre>标签
<pre>{{ content }}</pre>
- 设置
white-space样式（推荐）
<div class="content">
{{ content }}
</div>
.content{
white-space: pre-wrap;
}
菜鸟教程：white-space: pre-wrap;的用途在于它允许你保留源代码中的空白和换行，同时仍然允许文本自然换行，这在显示代码片段或需要保留文本格式的场景下非常有用。
- 方法三：使用
v-html（不推荐，可能被执行恶意脚本）
将文本中的换行与空格替换成HTML样式，然后使用v-html直接渲染HTML
<div
v-html="content.replace(/\n/g, '<br>').replace(/ /g, ' ')"
></div>