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

---

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

---

一、需求场景：

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

---

二、效果图对比：

三、实现方法：

1：通过 css属性实现

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

  
     职位描述：
     {
        {resumeDetails.postDescribe}}
   
  

2：使用v-html实现

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

• 部分代码如下：

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

---

四、相关阅读参考：

• 参考博客：点击查看

五、

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

  

• 前端页面form表单填写：

  

---

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