Vue中差值表达式识别换行符的方案

解决方法：

思路：实现文本换行有两种方法，一是HTML方法，即<br>标签；二是CSS方法，即white-space属性。

方法1. 使用v-html

   首先，将字符串里的\n替换为<br>，然后用v-html指令渲染字符串为innerHTML。

// JS部分
this.text = res.data.replace(/\n/g, '<br>')

// HTML部分
<div v-html="text"></div>

这种方法比较麻烦，而且存在安全问题，故不推荐使用。

方法2. 设置white-space属性（推荐）

  将div容器的white-space属性设置为pre-wrap即可解决问题。（这里我用的是vue+element+admin的框架，不知道为什么，没有生效。后台传值的字符串中明明有  \n  但并未执行换行，最后把 \n 用js再转一遍就可以了，作为前端小白，我也不知道为什么，可能是格式问题把。

this.str.replace(/\\n/g, '\n')  我也不知道为什么转一下，还是 \n 却可以换行了 有知道的大神，欢迎指点迷津

// CSS部分
.text-wrapper {
  white-space: pre-wrap;
}

// HTML部分
<div class="text-wrapper">{{text}}</div>

引用自 ：

大唐西域都护 

https://www.cnblogs.com/leegent/p/9274424.html