v-html does not recognize\nSolution

In some special scenarios in html, it is necessary for a certain text to wrap when it encounters \n, but it often has no effect after adding it. That's because html tags don't recognize \n, think \n, just a normal text.

There are usually several solutions to this problem

\n1. Use regular expressions to replace html with<br>

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

2. css style

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

3. <pre></pre>Labels
are not effective

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

Guess you like

Origin blog.csdn.net/Selina_lxh/article/details/129747432