vue的map使用,vue-map
map()函数是在JS的数组中定义的，它返回一个新的数组。下面文章主要介绍map()在Vue中的使用案例，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
目录
前言一、什么是map()？2.使用1。情况1:取给定数组的某个字段组成新的数组2。情况2:重命名给定数组的一些字段，形成一个新的数组3。总结。
前言
记录vue常用的map()，喜欢前台处理数据，对map()不熟悉。这两天用的比较频繁，没看到什么好的参考例子(可能是没找到好的)。自己试着写，自己想明白，自己记录就好了。留着以后用再翻找(脑子里不记得wow T_T了)。
一、map()是什么？
其实我也不知道。我希望我能使用它。数组操作是前端最重要的数据操作，构造数组数据和重构解析数组是数组操作中常见的。下面我就把我的经验和在Vue项目中map()的使用写出来。
二、使用
1.案例一：取给定数组的某一字段组成新数组
来自后台数据(json)的数据：
[//数据的数据
{txt:09:00-12:00 ， codId:1 ， flgDel:0 ， id:1}，
{txt:13:00-16:00 ， codId:1 ， flgDel:0 ， id:2}，
{txt:18:00-20:00 ， codId:1 ， flgDel:0 ， id:3}
]
前台使用应该是：
[09:00-12:00, 13:00-16:00, 18:00-20:00]
使用map()(我同学想用于循环遍历)只需要一行，让我觉得很麻烦。我只记得以前好像用过map()。最快的方法是出去。去学吧。
设time=data.map(item=(item.txt))
console.log(时间)
//控制台输出如下
//[09:00-12:00, 13:00-16:00, 18:00-20:00]
2.案例二：取给定数组的某些字段重命名并组成新数组
来自新接口的数据(json ):
[//新数据数据
{txt: visit ， flgDel:0 ， id:1}，
{txt: interview ， flgDel:0 ， id:2}，
{txt :其他， flgDel:0 ， id:3}
]
使用前景数组结构：
[{ name: visit }，{name: interview }，{name: other}]
//在这里，我看到有和案例一相比的字段，而且是新命名的。
//只有一行地图()
let resion=data . map(item=({ name:item . txt }))
console.log(resion)
//控制台输出
//[{ name: visit }，{name: interview }，{name: other}]
当然，也许这就是你想要的：
[{姓名：访问，id:1 }，{姓名：面试，id:2 }，{姓名：其他，id:3}]
//想要两个字段的数据
设resion 2=data . map(item=({ name:item . txt，id: item.id}))
console.log(resion2)
//控制台输出
//[{姓名：拜访，id:1 }，{姓名：面试，id:2 }，{姓名：其他，id:3}]
或者你想要这个：
[{name:访问1 }，{ name:访问2 }，{ name:其他3}]
//要拼接的数据
设resion 3=data . map(item=({ name:item . txt item . id }))
console.log(resion3)
//控制台输出
//[{name:访问1 }，{ name:访问2 }，{ name:其他3}]
//这个数据看起来好奇怪，没用。我只想说map()可以这么用，还有更多可以一起探索。
三、总结
太方便了，都有学生来找我咨询。很好理解。我相信你也可以使用它(小白教程)。
这就是我今天要记录的。本文只简单介绍一下vue中map()的数据处理，map()提供了很多可以让我们快速方便的处理数据的函数和方法。它还在等待我去发现它们。
关于map()在Vue中的用法的这篇文章就到这里了。更多关于Vue map()用法的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。