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>
