vue 项目,有时请求返回的数据 res.data 中会有含有 \n 的字符串,如果直接渲染的话无法实现换行。

解决方法:

一、通过 css属性 实现

即:设置 white-space: pre-wrap;,(代码如下):

<div style="white-space: pre-wrap;">{{请求返回的含有\n的字符串}}</div>
二、使用v-html实现

首先,将字符串里的 \n 替换为 <br>,然后用 v-html 指令渲染字符串为 innerHTML
部分代码如下:

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

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

前往低代码交流专区

更多推荐