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

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

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

相关推荐
moshuying9 小时前
别让AI焦虑,偷走你本该有的底气
前端·人工智能
GIS之路11 小时前
ArcPy,一个基于 Python 的 GIS 开发库简介
前端
可夫小子12 小时前
OpenClaw基础-为什么会有两个端口
前端
喝拿铁写前端12 小时前
Dify 构建 FE 工作流:前端团队可复用 AI 工作流实战
前端·人工智能
喝咖啡的女孩13 小时前
React 合成事件系统
前端
从文处安13 小时前
「九九八十一难」组合式函数到底有什么用?
前端·vue.js
前端Hardy13 小时前
面试官:JS数组的常用方法有哪些?这篇总结让你面试稳了!
javascript·面试
用户59625857360613 小时前
戴上AI眼镜逛花市——感受不一样的体验
前端
yuki_uix13 小时前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
老板我改不动了13 小时前
前端面试复习指南【代码演示多多版】之——HTML
前端