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

• admin
• 2025-06-21 16:01:20

文章目录

vue文本识别 “ \n ” 的换行问题：（完整案例说明）一、需求场景：二、效果图对比：三、实现方法：1：通过 `css属性`实现2：使用`v-html`实现

四、相关阅读参考：五、附：`response.data` - 后台返回的data截图:前端页面form表单填写：

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 ” 的换行问题（完整案例说明） ” 的全部内容。