解决：vue文本识别 “ \n ” 的换行问题（完整案例说明）

---

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表单填写：

  

---

以上就是关于“解决：vue文本识别 “ \n ” 的换行问题（完整案例说明） ” 的全部内容。