Textarea提交折行文本，如何实现前端换行显示

前端需要输入简单的长文本，但是又不想引入繁重的富文本编辑器，于是使用原生的Textarea文本组件。在“项目背景”栏输入两行文本，通过回车换行

提交给后端的数据格式如下，可以看到两行文本中间是回车符号

这样的文本在前端显示的时候是不能换行的，我们知道在HTML中换行是通过<br/>标签来使用的。于是我们需要将后端传过来的文本通过正则过滤转换下。

在Vue中，我们写一个filters过滤器

filters: {
    textareaFormat: function(text) {
      return text.replace(/\n|\r\n/g, '<br/>')
    }
}

然后在模板中使用该过滤器，就可以达到想要的换行效果

<span class="table-expand_info" v-html="$options.filters.textareaFormat(row.projectProgress)"></span>