如何将后端带过来的字符串通过‘,’号作为判断依据,分割字符串然后生成数组

在实际开发工程中我们会遇到我们调用后端接口获取图片、文件、视频甚至选择的对象时,如果是这样的:

这种数据类型如果想渲染在html中的话就会很麻烦,我们可以通过","号为切割点将它放入数组中,通过列表进行渲染

由于实际项目中的数据很多可能说起来会很乱,所以我举一个简单的例子:

// 假设我们有一个字符串  
let str = "apple,banana,orange,grape";  // 创建一个空数组  
let arr = [];  // 使用split方法根据逗号分割字符串,然后使用push方法将分割后的元素添加到数组中  
str.split(',').forEach(item => {  arr.push(item);  
});  // 打印数组  
console.log(arr); // 输出: ["apple", "banana", "orange", "grape"]

遍历字符串str,通过split方法根据需要切割字符串,我这里是“,”号,然后再用用push方法将分割后的元素添加到新的数组中即可完成该功能,然后再data域中获取定义新的数组array,将arr赋值给array,然后再template中通过v-for列表渲染数据即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/615921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue使用elementui select下拉库组件鼠标hover出现下拉框

mounted 生命周期里去监听 鼠标进入和鼠标移出事件 this.$refs.mySelect.addEventListener(mouseenter, function () {this.querySelector(.selectel .el-select-dropdown).style.display block})this.$refs.mySelect.addEventListener(mouseleave, function () {this.querySe…

STM32入门教程-2023版【3-4】总结GPIO使用方法

三、总结GPIO使用方法 总体上来说是比较简单的 首先初始化时钟,然后定义结构体,赋值结构体 GPIO_Mode可以选择那8种输入输出模式,GPIO_Pin选择引脚,可以用按位或的方式同时选中多个引脚,GPIO_Speed选择输出速度,最后使…

全网最全持续集成接口自动化-jmeter+ant+jenkins

ant 批量执行Jmeter 一、环境准备 1、JDK环境:Java Downloads | Oracle 2、ANT环境:Apache Ant - Binary Distributions 3、Jmeter:Apache JMeter - Download Apache JMeter 4、将 jmeter的extras目录中ant-jmeter-1.1.1.jar包拷贝至ant…

c语言中scanf的用法

通过键盘&#xff0c;将数据输入到变量中 #include<stdio.h>int main(void){int a;scanf("%d",&a);printf("%d",a);return 0; }scanf("%d",&a);: 从键盘输入数据的时候&#xff0c;输入的是一个个字符而不是数字等与已经定义好的…

【开发篇】一、内存泄漏的分析工具

文章目录 1、内存泄漏2、解决内存泄漏3、工具一&#xff1a;Top4、工具二&#xff1a;VisualVM5、工具三&#xff1a;阿尔萨斯Arthas6、工具四&#xff1a;Promethus Grafana7、图像分析 1、内存泄漏 一个对象不再使用后&#xff0c;&#xff08;因其从GC Root仍有引用链可达…

2023下半年软考证书什么时候发放?怎么领取?

已经确定领取时间的地区&#xff1a; 广东&#xff1a; 电子版&#xff1a;2024年1月8日上线 纸质版&#xff1a;预计24年2月开始 重庆&#xff1a; 邮寄申领&#xff1a;2024年1月15日0:00-3月1日23:00 现场领取&#xff1a;2024年1月15日-2月7日 贵州&#xff1a; 邮…

vue Element Plus Cascader级联选择器点击标签选中复选框

element-plus原功能 element-plus的Cascader级联选择器点击标签时是不会选中复选框的&#xff0c;我们想要实现点击标签时也能选中复选框这个效果&#xff0c;那么就要用到一些原生的方法 实现效果 mounted() {// Cascader 级联选择器: 点击文本就让它自动点击前面的input就可…

PPT自动化处理

python-pptx模块 可以创建、修改PPT(.pptx)文件非Python标准模块&#xff0c;需要单独安装 在线安装方式 pip install python-pptx 读取slide幻灯片 .slides 获取shape形状 slide.shapes 判断一个shape中是否存在文字 shape.has_text_frame 获取文字框 shape.text_f…

记录汇川:H5U与Fctory IO测试10

主程序&#xff1a; 子程序&#xff1a; IO映射 子程序&#xff1a; 自动程序 Fctory IO配置&#xff1a; HMI配置&#xff1a; 实际动作如下&#xff1a; Fctory IO测试10

Java Websocket发送文件给Vue客户端接收并上传,实现检测U盘插入并将指定文件上传到服务器功能

应用环境&#xff1a; B/S架构 需求描述&#xff1a; 1、判断U盘接入 2、扫描U盘指定文件&#xff0c;将满足条件的文件发送给服务器 解决思路&#xff1a; 1、因为bs架构&#xff0c;无法获取本机资源&#xff0c;计划在U盘所在服务器部署websocket服务 2、websocket服务扫描u…

C# 快速模指数运算 快速求余运算

此方法解决这样一个问题&#xff0c;就是a^b mod m 的余数是多少。 如果直接计算a^b&#xff0c;方次很大的时候&#xff0c;会溢出&#xff0c;而且时间很长。 当然指数很小的时候直接用自带的Math函数就行&#xff0c;如果指数很大的时候&#xff0c;可以用以下的方法。 原…

提升源代码安全性的C#和Java深度混淆工具——IpaGuard

保护C#|JAVA源代码的深度混淆工具——IpaGuard 摘要 Ipa Guard是一款功能强大的IPA混淆工具&#xff0c;通过对iOS IPA文件进行混淆加密&#xff0c;保护其代码、资源和配置文件&#xff0c;降低破解反编译难度。本文将介绍Ipa Guard的深度混淆技术&#xff0c;包括逻辑混淆、…

白学的小知识[node.ji三大模块]

1. http模块&#xff1a;http模块是Node.js官方提供的用来创建HTTP服务器和客户端的模块。它提供了一系列的方法和属性&#xff0c;用来满足用户对HTTP通信的需求。例如&#xff0c;可以使用http模块创建一个简单的HTTP服务器&#xff0c;监听指定的端口&#xff0c;并处理请求…

世微AP5125 输入14-80V 输出12V5A LED灯降压恒流电源驱动方案 SOT23-6

这是一款60WLED驱动方案,线路图BOM表如下 ​ 祥单表&#xff1a; 实物图&#xff1a; 产品描述 AP5125 是一款外围电路简单的 Buck 型平均电流检测模式的 LED 恒流驱动器&#xff0c;适用于 8-100V 电压范围的非隔离式大功率恒流 LED 驱动领域。芯片采用固定频率 140kHz 的 …

【Spring Boot】application 配置文件(2)

server.servlet.session.timeout1800 spring.jackson.time-zoneGMT8 spring.jackson.date-formatyyyy-MM-dd HH:mm:ss server.servlet.session.timeout1800 定义了 HTTP 会话的超时时间&#xff0c;单位是秒&#xff0c;在此设置中&#xff0c;会话的超时时间被设置为 1800秒 即…

element + table 行列合并

如图&#xff0c;实现通过判断数据&#xff0c;动态的合并列数据 <template><div class"merge-cell"><el-table:data"tableData":span-method"objectSpanMethod"borderstyle"width: 100%; margin-top: 20px"><e…

thinkadmin笔记

Db::name(huanggou)->where(id,$arra[dashou_id])->inc(num_read

记录el-select+el-tree复选框,支持模糊查询,懒加载,树父子节点不关联,不全选

需求&#xff1a;一个机构下拉菜单&#xff0c;一个人员下拉菜单&#xff0c;默认带入当前登录用户的机构和人员。机构下拉菜单为两个接口&#xff0c;模糊查询为一个接口不包含懒加载&#xff0c;默认非模糊查询情况下为一个接口&#xff0c;点击节点懒加载。机构下拉菜单数据…

计算机网络+线性代数+大学物理

前言 不加湘潭大学的tag&#xff0c;防止曝光率太高哈哈 计算机网络 选择题确定的是5个题&#xff0c;填空题确定的是2个题&#xff0c;简答题前两个确定&#xff0c;然后就没有了&#xff0c;27&#xff0b;62&#xff0c;26&#xff0b;&#xff0c;确实是比较难&#xff…