vue知识点之vue文本识别 “ \n ” 的换行问题

一、需求场景

vue项目，axios.post提交请求之后，接收返回的response.data中，含有 \n 的字符串。
那么，如何让 \n 页面中显示为换行效果？

二、效果图对比

• 🔊修改前

• 🔊修改后

三、实现方法

1、通过 css属性实现

即：设置 white-space: pre-wrap;（代码如下）：

<el-row>
    <el-col>职位描述：</el-col>
    <el-col style="white-space: pre-wrap;">{{resumeDetails.postDescribe}}</el-col>
</el-row>

2、使用v-html实现

首先，将字符串里的\n替换为<br>，然后用v-html指令渲染字符串为innerHTML。

部分代码如下：

// JS部分
this.text = res.data.replace(/\n/g, '<br>')

// HTML部分
<div v-html="text"></div>

四、案例说明

• 附：response.data - 后台返回的data截图:

• 前端页面form表单填写：