Desarrollado recientemente un proyecto vue2, la interfaz devuelve datos similares a este:我是第一行的哦\n我是第二行的哦
Lo rendericé directamente así,
//html
<p v-html='text'></p>
//渲染值
this.text = "我是第一行的哦\n我是第二行的哦"
Pero el resultado no es satisfactorio, se convierte en el siguiente
Solución
1. Agregue estilos cuando use v-html, espacios en blanco: ajuste previo, deje que el navegador mantenga espacios en blanco y saltos de línea.
<p v-html="text" style="white-space:pre-wrap"></p>
2.
Envuelto con preetiquetas El texto encerrado en las preetiquetas normalmente conserva espacios y saltos de línea.
<pre><p v-html="text"></p></pre>
3. Reemplazo regular
Reemplace \n con expresiones regulares
para que v-html pueda reconocer
<p v-html="text.replace(/\n/g,'<br/>')"></p>
Lo resolví con el segundo método.
Resumen en caso de que lo encuentre la próxima vez, consulte el artículo: https://www.jianshu.com/p/3719cd89c0bd