在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;
}
然后就正常了,看着简单,我也是折腾了很久呢