vue webapp之music（十一）歌手数据处理和singer类的封装

1.规范化处理数据（有时后端给到我们的数据并不是我们所需要的，所以需要自己对数据进行整理）

_normalizeSinger(list) {let map = {hot: {//热门数据title: HOT_NAME,items: []}}list.forEach( (item, index) => {if (index < HOT_NAME_LEN) {// items.push(item[index])map.hot.items.push(new Singer({id: item.Fsinger_mid,  //  图片拼接地址name: item.Fsinger_name //名字}))}//根据字母做聚类const key = item.Findexif (!map[key]) {map[key] = {title: key,items: []}}map[key].items.push(new Singer({id: item.Fsinger_mid,  //  图片拼接地址name: item.Fsinger_name //名字}))})//为了得到有序列表，我们需要处理maplet hot = []let ret = []for (let key in map) {let val = map[key]if(val.title.match(/[a-zA-Z]/)) {ret.push(val)} else if(val.title === HOT_NAME) {hot.push(val)}}ret.sort((a,b) => {return a.title.charCodeAt(0) - b.title.charCodeAt(0)})return hot.concat(ret)}

2.新建一个singer类，并将singer类引入所需要的组件中

export default class Singer{constructor({id, name}) {this.id = idthis.name = namethis.avatar = `https://y.gtimg.cn/music/photo_new/T001R300x300M000${id}.jpg?max_age=2592000`}
}

vue webapp之music（十一）歌手数据处理和singer类的封装相关推荐

编程实现newton插值c++_数据体操：数据处理和IDW地理插值算法
问题背景最近的研究课题遇到数据补全的需求,需要根据国际气象数据站的气象数据,对关注的缺值点进行补全.例如,假设我有位于A.B.C.D四市的四个气象观测站的某日的数据(包括观测站的经纬度数据.名称及气 ...
ACCV2020细粒度比赛记录-数据处理和Baseline结果分享
比赛链接: accv官网:https://sites.google.com/view/webfg2020 比赛网站:https://www.cvmart.net/race/9917/base 数据下载 ...
Pandas时间序列数据处理和datetime模块详细教程
时间序列分析中,常常需要处理时间相关数据,故参考<Python for Data Analysis>总结了Python和Pandas常用的时间序列数据处理的相关操作,并在 Python3. ...
Java第六次作业--异常处理和Java类集
(一)学习总结 1.用思维导图对本周的学习内容进行总结. 2.当程序中出现异常时,JVM会依据方法调用顺序依次查找有关的错误处理程序.可使用printStackTrace 和getMessage方法了 ...
Java大数据学习第六天------面向对象类对象封装
面向过程: 强调的是过程, 面向对象: 强调的是结果,只需要关注结果就好. 面向对象的三大特征: 封装: 把相关的数据封装成一个"类"组件继承: 是子类自动共享父类属性和 ...
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
Vue实战篇三十一：实现一个改进版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
千牛包表包下载_带有服务器端处理和VueJS组件的数据表包
千牛包表包下载 Vue数据表 (Vue Data Table) Data Table package with server-side processing and VueJS components. ...

vue webapp之music（十一）歌手数据处理和singer类的封装

vue webapp之music（十一）歌手数据处理和singer类的封装相关推荐

最新文章

热门文章

vue webapp之music（十一） 歌手数据处理和singer类的封装

vue webapp之music（十一） 歌手数据处理和singer类的封装相关推荐

最新文章

热门文章

vue webapp之music（十一）歌手数据处理和singer类的封装

vue webapp之music（十一）歌手数据处理和singer类的封装相关推荐