v-html 不识别\n解决方法

在 html 中的一些特殊场景中需要某一段文字遇到 \n 就行换行，但是往往加了后没有效果。 那是因为html标签不识别 \n ,认为\n ,只是一个普通的文本。

解决这种问题通常有以下几种方案

1.利用正则将html的\n换成<br>

<div v-else v-html="`${item.answer}`.replace(/\n/g,'<br/>')"></div>

2.css样式

<div v-else v-html="`${item.answer}`" style="white-space:pre-line;"></div>

3.<pre></pre>标签
效果不好

<pre>
	<div v-else v-html="`${item.answer}`"></div>
</pre>