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

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

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

相关推荐
陆枫Larry几秒前
一次登录问题排查:接口没错,错的是旧业务逻辑
前端
小小小小宇6 分钟前
大模型打分与采样原理,以及 Pi Agent 核心原理
前端
XZ-0700016 分钟前
week2-1-可视化
开发语言·python
Java后端的Ai之路14 分钟前
14、Python - 责任链模式
服务器·开发语言·人工智能·python·责任链模式
吴声子夜歌27 分钟前
Java——基本类型
java·开发语言
一位正在转型AI全栈的前端工程师31 分钟前
AI 全栈学习之旅 -Week 5:RAG 知识库问答系统:从零到生产级部署的全栈实践总结
前端·python
「QT(C++)开发工程师」40 分钟前
C++11 std::unique_ptr — 独占所有权的智能指针
c语言·开发语言·c++·qt
光影少年1 小时前
react navite 安卓iOS 打包、签名、环境区分
前端·react native·react.js
coderCN1 小时前
Nodejs 第三十四章 数据库(表达式和函数、子查询和连表)
前端·node.js
不正经学生1 小时前
C语言动态内存管理(上):堆上的自由与责任
c语言·开发语言·c++·算法·面试