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

embedded/2024/12/29 6:04:36/

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.ppmy.cn/embedded/149654.html

相关文章

HuaWei、NVIDIA 数据中心 AI 算力对比

HuaWei Ascend 910B Ascend 910B 是 HuaWei 于 2023 年推出的高性能 AI 处理器芯片&#xff0c;其对标产品为 Nvidia A100/A800&#xff0c;其算力表现如下&#xff1a; 峰值算力&#xff1a;Ascend 910B 的半精度&#xff08;FP16&#xff09;算力达到 256 TFLOPS&#xff08;…

MySQL数据库函数——日期函数

常用的日期函数 函数功能curdate()返回当前日期curtime()返回当前时间now()返回当前日期和时间year(date)获取指定date的年份month(date)获取指定date的月份day(date)获取指定date的日期date_add(date,interval expr type)返回一个日期/时间值加上一个时间间隔expr后的时间值d…

【面试经典】多数元素

链接&#xff1a;169. 多数元素 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 在本文中&#xff0c;“数组中出现次数超过一半的数字” 被称为 “众数” 。 需要注意的是&#xff0c;数学中众数的定义为 “数组中出现次数最多的数字” &#xff0c;与本文定…

典型常见的基于知识蒸馏的目标检测方法总结二

来源&#xff1a;https://github.com/LutingWang/awesome-knowledge-distillation-for-object-detection收录的方法 NeurIPS 2017&#xff1a;Learning Efficient Object Detection Models with Knowledge Distillation CVPR 2017&#xff1a;Mimicking Very Efficient Networ…

【玩转OCR】 | 腾讯云智能结构化OCR在多场景的实际应用与体验

文章目录 引言产品简介产品功能产品优势 API调用与场景实践图像增强API调用实例发票API调用实例其他场景 结语相关链接 引言 在数字化信息处理的时代&#xff0c;如何高效、精准地提取和结构化各类文档数据成为了企业和政府部门的重要需求。尤其是在面对海量票据、证件、表单和…

Chromium GN 目标指南 - view_example 表单示例 (八)

1. 引言 在前面的文章中&#xff0c;我们学习了如何创建计数器示例&#xff0c;了解了如何使用 Label 和 Button 控件进行交互以及更新 UI 状态。在本篇文章中&#xff0c;我们将创建一个更复杂的示例 —— 表单&#xff0c;以学习如何使用 Textfield、Combobox 和 Checkbox 等…

Linux 下 Mamba 环境安装踩坑问题汇总(重置版)

导航 安装教程导航 Mamba 及 Vim 安装问题参看本人博客&#xff1a;Mamba 环境安装踩坑问题汇总及解决方法&#xff08;初版&#xff09;Linux 下Mamba 及 Vim 安装问题参看本人博客&#xff1a;Mamba 环境安装踩坑问题汇总及解决方法&#xff08;重置版&#xff09;Windows …

梳理你的思路(从OOP到架构设计)_设计模式Template Method模式

目录 1、Template Method模式 2、范例&#xff1a; Android TM模式 3、基于TM模式的扩充&#xff1a;以游戏的绘图循环(Game Loop)为例 4、Android中处处可见TM模型的应用 1、Template Method模式 在前面各节里&#xff0c;我们介绍过&#xff0c;控制反转(IoC:Inversion…