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

  • Post author:
  • Post category:其他


在 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>