字符串里有\r \n \t 等特殊符号, 前端页面怎么显示出来

如图, 右边是后端返回给我的数据 , 包含\r\n ,就是换行 , 后面还有很多空格,  页面上要像左边这样显示出换行及空格,  如果直接用普通标签渲染 , 换行和空格不会显示出来 , 这时候需要用pre标签  

\r\n 一般一起用，用来表示键盘上的回车键，也可只用 \n。
\t表示键盘上的“TAB”键

一 , pre标签的作用

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性

二 , template中

三 , style中

pre {
      white-space: pre-wrap;
    }