文章目录
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>
四、相关阅读参考:
- 参考博客:点击查看
五、
以上就是关于“解决:vue文本识别 “ \n ” 的换行问题(完整案例说明) ” 的全部内容。