vue white-space正确处理元素的内的换行元素

场景

• vue textarea填充了一些数据,但是展示的不出需要的效果, 换行符失效

分析

• 检查了textarea && 以及 存到数据库中的数据 ，换行符是有的，所以问题出在展示的地方
• 因为使用vue 所以在解析数据的时候使用的是vue的解析符号{{}} 而不可以使用laravel的{!! !!} 所以没有办法完成解析

参考文档

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

解决

• white-space : pre-line 元素内数据连续多个空白被合并成一个 && 解析换行符

<p style="white-space: pre-line">{{ message.body }}</p>