Vue中的map()用法
大约 2 分钟约 496 字...
Vue中的map()用法
前言
记录vue常用得map(),喜欢在前台处理数据,但是map()用得也不熟悉。这两天频繁用,也没看到好的参考样例(可能好的我没找到)。就自己试着写琢磨出来,自己记录一下。省的以后用再去翻找(自己脑子记不住哇 T_T ).
使用
1.案例一:取给定数组的某一字段组成新数组
后台传来的数据 data(json):
[ //data的数据
{"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()的话只需一行(也有想要用到for循环遍历出来)我就觉得很麻烦,只记得之前貌似用过map()。快捷方法出来了学去吧。
let time = data.map(item =>(item.txt))
console.log(time)
//控制台输出如下
//['09:00-12:00', '13:00-16:00', '18:00-20:00']
2.案例二:取给定数组的某些字段重命名并组成新数组
新的接口传来data(json):
[ //新data数据
{"txt":"拜访","flgDel":"0","id":1},
{"txt":"面试","flgDel":"0","id":2},
{"txt":"其他","flgDel":"0","id":3}
]
前台使用数组结构:
[{ name: '拜访' }, { name: '面试' }, { name: '其他' }]
//这里看到相比于案例一有字段了,还新命名了
如果要的两个字段的数据 :
[{ name: '拜访',id:'1' }, { name: '面试',id:'2' }, { name: '其他',id:'3'}]
//要两个字段的数据
let resion2 = data.map(item =>({name: item.txt, id: item.id}))
console.log(resion2)
//控制台输出
//[{ name: '拜访',id:'1' }, { name: '面试',id:'2' }, { name: '其他',id:'3'}]
又或许想要这样⬇ :
[{ name: '拜访1' }, { name: '面试2' }, { name: '其他3'}]
//要拼接的数据
let resion3 = data.map(item =>({name: item.txt + item.id}))
console.log(resion3)
//控制台输出
[{ name: '拜访1' }, { name: '面试2' }, { name: '其他3'}]
你认为这篇文章怎么样?
- 0
- 0
- 0
- 0
- 0
- 0