解决:vue文本识别 “ \n ” 的换行问题(完整案例说明)


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>
    
    

四、相关阅读参考:

五、

  • 附:response.data - 后台返回的data截图:
    在这里插入图片描述
  • 前端页面form表单填写:
    在这里插入图片描述

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

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页