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

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

这种数据类型如果想渲染在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列表渲染数据即可。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#,入门教程(14)——字符串与其他数据类型的转换

上一篇: C#,入门教程(13)——字符(char)及字符串(string)的基础知识https://blog.csdn.net/beijinghorn/article/details/123928151 数据只有可视化才能更好地体现其价值,因而 string 与 image…

【双指针】001移动零_C++

题目链接:移动零 目录 题目解析 代码书写 知识补充 题目解析 题目让我们求必须在不复制数组的情况下,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 这题我们可以用双指针的方法来写: 我们这里将用两个数组下标来…

权限系统模型:RBAC模型与ABAC模型

权限系统 基于角色的访问控制(RBAC) 基于角色的控制访问(Role-Based Access Control,简称 RBAC),即:给予该账号角色(Role),授权角色对应的相关权限&#xf…

【GNN 1】PyG实现图神经网络,完成节点分类任务,人话、保姆级教程

我们来做一个节点分类的任务,选择的数据集是Karate Club,Karate是空手道的意思,所以这就是一个空手道俱乐部的数据。 简而言之,这个数据集,包含34个节点,156条无向无权边,结点总共分为4类&…

SQL-DCL-如何用户管理,如何给用户权限?

🎉欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹 ✨博客主页:小小恶斯法克的博客 🎈该系列文章专栏:重拾MySQL 🍹文章作者技术和水平很有限,如果文中出现错误&am…

【一周安全资讯0106】国家标准《信息安全技术 网络安全信息报送指南》正式发布;全球1100万SSH服务器面临“水龟攻击”威胁

要闻速览 1、国家标准GB/T 43557-2023《信息安全技术 网络安全信息报送指南》发布 2、《未成年人网络保护条例》元旦起施行 织密未成年人网络保护立体“安全网” 3、深圳证监局:证券期货经营机构应建立健全网络安全应急处置机制 4、黑客大规模恶意注册与ChatGPT相似…

创建一个简单鸿蒙app项目

文章目录 前言TypeScript 基础类型创建一个鸿蒙app总结 一、前言 鸿蒙系统上的开发已经是趋势了,必须紧跟时代的潮流。先简单了解下鸿蒙系统中,我们开发一个app需要用到的语言,那么就是TypeScript。这篇文章主要讲的就是一些基础的语法。最…

mysql数据库被黑恢复—应用层面delete删除---惜分飞

客户的mysql被人从应用层面攻击,并且删除了一些数据,导致业务无法正常使用,通过底层分析binlog确认类似恢复操作 确认这类的业务破坏是通过delete操作实现的,客户那边不太幸,客户找了多人进行恢复,现场严重破坏,老库被删除,并且还原了历史的备份文件(非故障第一现场),通过底层…

adrv9009使用记录

这里写自定义目录标题 1.首先下载cygwin,CSDN可以直接搜索,按照对应的安装就可以,最后记得加一个make安装包,不然在make时候会导致指令不存在 2.下载完成之后,去adi官网找到对应版本的adrv9009工程 我得电脑是2018.3&a…

2024年第十届控制、自动化与机器人国际会议(ICCAR 2024)即将召开!

2024年4月27~29日 新加披 会议官网:10th-ICCAR 2024https://iccar.org/index.html 第十届控制、自动化和机器人国际会议将于2024年4月27-29日在新加坡举办。本次会议由新加坡电子学会,IEEE机器人和自动控制协会和IEEE联合主办,并得到北京航空…

《SPSS统计学基础与实证研究应用精解》视频讲解:SPSS调查问卷获取数据的流行操作

《SPSS统计学基础与实证研究应用精解》1.3 视频讲解 视频为《SPSS统计学基础与实证研究应用精解》张甜 杨维忠著 清华大学出版社 一书的随书赠送视频讲解1.3节内容。本书已正式出版上市,当当、京东、淘宝等平台热销中,搜索书名即可。本书旨在手把手教会使…

行为型设计模式——观察者模式

观察者模式 观察者模式也不难,这个模式用大白话将就是若干个观察者类都订阅一个发布类(被观察者类),当发布者需要发表消息的时候,观察者都能够收到消息。**定义:**又被称为发布-订阅(Publish/S…

Making Large Language Models Perform Better in Knowledge Graph Completion

Making Large Language Models Perform Better in Knowledge Graph Completion 基本信息 博客贡献人 鲁智深 作者 Yichi Zhang, Zhuo Chen, Wen Zhang, Huajun Chen 隶属于浙江大学计算机学院和软件学院 摘要 本文主要探讨了如何将有用的知识图谱结构信息融入大语言模型中…

线性布局(Row/Column)

目录 1、概述 2、基本概念 3、布局子元素在排列方向上的间距 3.1、Column容器内排列方向上的间距 3.2、Row容器内排列方向上的间距 4、布局子元素在交叉轴上的对齐方式 4.1、Column容器内子元素在水平方向上的排列 4.2、Row容器内子元素在垂直方向上的排列 5、布局子元…

Sam Altman 与同性男友结婚;传微软正讨论亚洲研究院去留丨 RTE 开发者日报 Vol.125

开发者朋友们大家好: 这里是 「RTE 开发者日报」 ,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE (Real Time Engagement) 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

Python实现简易版选课系统

嗨喽,大家好呀~这里是爱看美女的茜茜呐 需求 学生选课系统: 学生 信息:学号,姓名,住址,选的课程列表 功能: 查看:查看该学生所有课程添加课程:把选好得课程添加到课程列…

Python数据分析案例31——中国A股的月份效应研究(方差分析,虚拟变量回归)

案例背景 本次案例是博主本科在行为金融学课程上做的一个小项目,最近看很多经管类的学生作业都很需要,我就用python来重新做了一遍。不弄那些复杂的机器学习模型了,经管类同学就用简单的统计学方法来做模型就好。 研究目的 有效市场假说是现…

基于ssm社区医疗保健监控系统+vue论文

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统社区医疗保健信息管理难度大,容错率低&#x…

生成式人工智能研究焦点:揭秘基于扩散的模型

生成式人工智能研究焦点:揭秘基于扩散的模型 文章目录 生成式人工智能研究焦点:揭秘基于扩散的模型去噪扩散是什么让扩散发挥作用?采样生成图像的设计选择以更少的步骤理顺流程在低噪音水平下步骤高阶求解器可实现更准确的步骤训练降噪器的设…

Lagrange对偶法

这里写自定义目录标题 5.1.1 The Lagrangian5.1.2 The Lagrange dual function5.2 The Lagrange dual problem5.2.3 Strong duality and Slater’s constraint qualification5.2.3 Strong duality and Slater’s constraint qualification5.5.3 KKT optimality conditions Lagr…