html 中识别\n自动换行

CSS实现：white-space

<div style="white-space: pre-wrap;" v-html="str">
</div>

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

值	描述	换行符	空格和制表符	文字换行	行尾空格
normal	默认。空白会被浏览器忽略。	合并	合并	换行	删除
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。	合并	合并	不换行	删除
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。	保留	保留	不换行	保留
pre-wrap	保留空白符序列，但是正常地进行换行。	保留	保留	换行	挂起
pre-line	合并空白符序列，但是保留换行符。	保留	合并	换行	删除
inherit	规定应该从父元素继承 white-space 属性的值。	保留	保留	换行	保留

JS实现：replace

<script>
//使用正则将\n替换成<br/>标签
str= str.replace(/\n/g,'<br>')
</script>