vue文本识别 “ \n ” 的换行问题
在 vue 项目,有时请求返回的数据 res.data 中会有含有 \n 的字符串,如果直接渲染的话无法实现换行。解决方法:一、通过 css属性 实现即:设置 white-space: pre-wrap;,(代码如下):<div style="white-space: pre-wrap;">{{请求返回的含有\n的字符串}}</div>二、使用v-html实现首先,将字符串
·
在
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>
更多推荐
已为社区贡献5条内容
所有评论(0)