- 使用
<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
javascript"><div v-html="content.replace(/\n/g, '<br>').replace(/ /g, ' ')"
></div>