当前位置: 首页 > article >正文

识别后端返回的字符串中携带的空格 以及换行 要在前端展示 v-html

1.直接使用v-html
 

 <view v-html="formattedIssueDesc"></view>

2.由于直接使用 v-html 指令可能不会将 \n 解释为换行,所以就有第二种
 

<template>
  <view v-html="formattedIssueDesc"></view>
</template>
 
<script>
export default {
  data() {
    return {
      issueDesc: '后端返回字符串\n后端返回字符串\n后端返回字符串'
    };
  },
  computed: {
    formattedIssueDesc() {
      return this.issueDesc.replace(/\n/g, '<br/>');
    }
  }
};
</script>

3.还有最后一种 使用 CSS white-space 属性

通过设置 CSS 样式来保留文本中的空白符,包括换行符。但是,请注意,white-space: pre 会保留所有的空白符,包括空格和制表符,并且文本会以等宽字体显示。而 white-space: pre-line 会合并连续的空格,但保留换行符。
 

<template>
  <view style="white-space: pre-line;">{{ issueDesc }}</view>
</template>
 
<script>
export default {
  data() {
    return {
      issueDesc: '后端返回字符串\n后端返回字符串\n后端返回字符串',
    };
  }
};
</script>


http://www.kler.cn/a/454516.html

相关文章:

  • 低代码开发平台排名2024
  • SpringBoot学习
  • 电子电气架构 --- 什么是自动驾驶技术中的域控制单元(DCU)?
  • EKF 自动匹配维度 MATLAB代码
  • http 请求总结get
  • Vue.js 高级组件开发:抽象与高性能架构
  • Python初识
  • MySQL从入门到入土---MySQL表的约束 (内含实践)---详细版
  • 火山引擎边缘云全面升级智能边缘,推动 AI 应用场景拓展与技术创新
  • K8s 常用资源介绍
  • clickhouse测试报告
  • Git如何设置和修改当前分支跟踪的上游分支
  • Ubuntu22.10/22.04 autoinstall--OK
  • spring boot 火车售票微信小程序LW
  • mongodb和Cassandra
  • 数学笔记:公理
  • docker安装nginx,docker部署vue前端,以及docker部署java的jar部署
  • SpringbBoot如何实现Tomcat集群的会话管理
  • Linux PWM(脉宽调制
  • Photoshop启动错误:找不到MSVCP140.dll的多步骤解决指南
  • mysql数据库中,一棵3层的B+树,假如数据节点大小是1k,那这棵B+可以存多少条记录(2100万的由来)
  • 01 Oracle 基本操作
  • mysql高版本导入到低版本
  • 解析 Facebook:社交网络的影响力与挑战
  • Android 之 Activity 的启动模式(launchMode)
  • flask后端开发(10):问答平台项目结构搭建