vue使用v-html保留原内容的缩进和换行

在vue中v-html是一个非常有用的工具，比如从后端读取日志，就这么搞

<div class="context" ref="cnt_log" v-html="logdata"></div>

然后一个触发函数，返回logdata的数据即可。不过这个时候，估计会发现，怎么返回到页面的格式不对劲啊，全挤成了一坨，没有换行，也没有原有的缩进，比如

其实一招就解决了，无需后端特殊处理比如行尾都加上<br>啥的，只要给div加个样式即可

.context {
  word-break: normal;		#自动换行 
  width: auto; 
  height: 700px;
  white-space:pre-wrap;     #保留原内容的换行和缩进
  word-wrap : break-word ;
  overflow: scroll;         #溢出的内容显示为滚动条，而不是溢出页面
  background-color: black;
  color: #83fcf5;           #字体颜色
  padding: 15px;
}

然后就正常了，看着简单，我也是折腾了很久呢