业务场景：后台服务器返回了一个列表包含remark(备注)字段，有的是后台给补了\n换行符，有的没有换行符，数据截图如下：
image.png
默认Vue模版字符串插值方式，并不能直接把换行符显示出来
解决方案：
思路：实现文本换行有两种方法，一是HTML方法，即
标签；二是CSS方法，即white-space属性
方法1. 使用v-html
首先，将字符串里的\n替换为
，然后用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-line即可解决问题。
// CSS部分
.text-wrapper {
white-space: pre-line;
}
// HTML部分
<div class="text-wrapper">{{text}}</div>
image.png
至此：
但是仍旧出现了没有换行符的地方，文字没有垂直居中的问题
方案如下：
动态判断文字是否包含换行符，来动态添加class
<template slot-scope="scope">
<div :class="{ 'text-wrapper': scope.row.remark.indexOf('\n') != -1 }">
{{ scope.row.remark | judgeContent }}
</div>
</template>
关联文章：
JS中判断某个字符串是否包含另一个字符串的方法
https://blog.csdn.net/qq_18671415/article/details/105799738
