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

news2024/11/23 19:18:26

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

这种数据类型如果想渲染在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.coloradmin.cn/o/1374202.html

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

相关文章

切分大文件sql为小份

数据库太大了,整个备份导入出问题或者慢,需要将整个库按照表分割(一个表一个sql文件) 环境 win10 工具:python3.7pycharm 要分割的文件大小:6G,sql文件import redbname with open(best**.sql,…

C++学习笔记(三十二):c++ 堆内存与栈内存比较

本节对堆和栈内存进行描述。 应用程序启动后,操作系统将整个程序加载到内存,分配相应的物理ram,确保程序可以正常运行。堆和栈是ram中存在的两个区域。栈通常是一个预定义大小的内存区域,一般是2M字节左右。堆也是预定了默认值的…

第五站:C++的内存解析

目录 C内存分布 变量的四种存储方式 函数返回值使用指针(指针函数) 动态分配内存空间 不能使用外部函数的普通局部变量的地址 通过指针函数返回静态局部变量的地址 动态内存 根据需要分配内存,不浪费(根据用户的需求设置内存的容量) 被调用函数之外需要使用被调用函数内…

柳胜勋:0.88秒!NineData数据库编程大赛的第二名,轻松完成百万级数据代码评测!!

数据库编程大赛:一条SQL计算扑克牌24点 12月27日,NineData和云数据库技术社区主办,华为云、火山引擎、开源中国、云和恩墨、TDengine、云猿生数据、DORIS、ITPUB等协办单位和媒体,共同举办了本次《数据库编程大赛》。大赛题目「用…

LeetCode-657/1275/1041

1.机器人能否返回原点(657) 题目描述: 在二维平面上,有一个机器人从原点 (0, 0) 开始。给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束。 移动顺序由字符串 moves 表示。字符 move[i] 表示其第 …

Python办公自动化 – 自动化文本翻译和Oracle数据库操作

Python办公自动化 – 自动化文本翻译和Oracle数据库操作 以下是往期的文章目录,需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处理 Python办公自…

python统计分析——箱线图(df.boxplot)

资料来源:用python学统计学,帮助文档 使用pd.dataframe.boxplot()函数绘制箱线图 import numpy as np import pandas as pd from matplotlib import pyplot as pltdfpd.DataFrame({type:[A,A,A,A,A,A,A,A,A,A,B,B,B,B,B,B,B,B,B,B],value:[2,3,3,4,4,4…

门店管理系统驱动智慧零售升级

在当今数字化经济的大潮中,实体门店正在经历一场由内而外的深度变革。门店管理系统以其高效、便捷和全面的功能特性,为实体店提供了高效的运营解决方案。 门店管理系统拜托了传统零售业对本地化软件的依赖,它将复杂的信息技术转化为易于获取…

Redis性能大挑战:深入剖析缓存抖动现象及有效应对的战术指南

在实际应用中,你是否遇到过这样的情况,本来Redis运行的好好的,响应也挺正常,但突然就变慢了,响应时间增加了,这不仅会影响用户体验,还会牵连其他系统。 那如何排查Redis变慢的情况呢&#xff1f…

隧道自动化监测系统的主要产品和监测内容

一、背景 随着交通行业的不断发展,隧道作为交通基础设施的重要组成部分,其安全和稳定性对于保障人们的生命财产安全具有重要意义。隧道自动化监测系统作为一种先进的安全监测手段,能够实时监测隧道内部的各项参数,为隧道的安全运…

Kubernetes的动态pv

pv和pvc存储卷 存储卷: emptyDir:容器内部,随着pod销毁,emptyDir也会消失,不能做数据持久化 hostPath:持久化存储数据可以和节点上目录做挂载,pod被销毁了数据还在 NfS:一台机器,提供pod内容器所有的挂…

Elasticsearch 索引文档时create、index、update的区别【学习记录】

本文基于elasticsearch7.3.0版本。 一、思维导图 elasticsearch中create、index、update都可以实现插入功能,但是实现原理并不相同。 二、验证index和create 由上面思维导图可以清晰的看出create、index的大致区别,下面我们来验证下思维导图中的场景&…

2023年山东省职业院校技能大赛高职组信息安全管理与评估 理论题(正式赛)

2023年山东省职业院校技能大赛高职组信息安全管理与评估 理论题 理论技能与职业素养(100分) 2023年山东省职业院校技能大赛高职组信息安全管理与评估 理论题 【注意事项】 Geek极安云科专注技能竞赛技术提升,基于各大赛项提供全面的系统性…

大数据系列之:腾讯云服务器性能和价格比较

大数据系列之:腾讯云服务器性能和价格比较 一、磁盘性能和价格比较二、高性能云硬盘三、ssd云硬盘四、极速型ssd云硬盘五、增强型ssd云硬盘六、查看腾讯云服务器价格 一、磁盘性能和价格比较 磁盘名称高性能ssd云硬盘极速型ssd云硬盘增强型ssd云硬盘规格500g 5800 …

九州金榜|提高孩子认知,让问题自动消失

哈佛大学教授桑斯坦曾提出一个概念,叫做“信息茧房”。 意思是说:人们关注的信息领域,会习惯性地被自己的思想所引导,当你长时间接受单一观点时,就像蚕茧一样把自己越包越紧,越来越封闭。 走不出认知逻辑…

爬虫01-爬虫原理以及爬虫前期准备工作

文章目录 1 爬虫基本原理什么是爬虫爬虫功能详解爬虫基本流程两个概念:request和response 2 一些问题爬虫能抓取什么样的数据?抓取的数据怎么提取部分内容?数据解析方式。为什么我爬虫抓取的数据和浏览器看到的不一样怎样解决JavaScript渲染的…

数字档案安全与高效管理的先锋——亚信安慧AntDB数据库

档案工作在维护历史真实面貌、保障人民利益方面具有至关重要的作用。随着社会的发展,数字化转型成为档案管理领域的不可逆趋势。数字档案的存储和传输已经成为档案工作的重要组成部分,然而,这也伴随着一系列的挑战,其中安全风险是…

window11后台服务优化记录

这里:\WINDOWS\xxx\svchost.exe -k netsvcs -p 信号聚合器服务,用于根据时间、网络、地理位置、蓝牙和 CDF 因素评估信号。支持的功能包括设备解锁、动态锁定和动态 MDM 策略 参考: 优化参考v1

时间差异导致数据缺失,如何调整Grafana时间与Prometheus保持同步?

Grafana时间如何调快或调慢? 在k8s环境中,常使用prometheusgrafana做监控组件,prometheus负责采集、存储数据,grafana负责监控数据的可视化。 在实际的使用中,有时会遇到这样的问题,k8s集群中的时间比真实…

Zabbix6.4 监控系统 密码忘记怎么办

Zabbix6.4 监控系统 密码忘记怎么办? 如下图 本次主要介绍在Zabbix6.4中重置用户密码的步骤。 步骤 如果您忘记了Zabbix密码并且无法登录,请向Zabbix管理员求助。 超级管理员用户可以在用户配置表单中更改所有用户的密码。 如果超级用户忘记了密码&a…