用Vue来实现音乐播放器(十五):处理得到的歌手数据
之前得到的歌手数据是用forEach遍历添加的 没有顺序性 我们希望得到的数据是title:"热门"的数据在最上面 title为字母的数据按字母从低到高顺序排列
var hot=[]
var ret=[]
for(let key in map){
let val=map[key] //在对象map中 键为key 对应的键值
if(val.title.match(\[a-zA-Z]\)){
ret.push(val)
}else if(val.title==="热门"){
hot.push(val)
}
//将ret数组中的对象按首字母大小排列
ret.sort((a,b)=>{
return a.title.charCodeAt(0)-b.title.charCodeAt(0)
})
} return hot.concat(ret)
用Vue来实现音乐播放器(十五):处理得到的歌手数据的更多相关文章
- 用Vue来实现音乐播放器(二十一):歌手详情数据抓取
第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...
- 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...
- vue小练习--音乐播放器
1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- 用Vue来实现音乐播放器(三十八):歌词滚动列表的问题
1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- 用Vue来实现音乐播放器(十四):歌手数据接口抓取
第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 import jsonp from '../common/j ...
- Vue实战:音乐播放器(一) 页面效果
先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心
- 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...
- 用Vue来实现音乐播放器(十八):右侧快速入口点击高亮
问题一:当我们点击右侧快速入口的时候 被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候 将scrollY的值和listHeight ...
- 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯
1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面 利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中 定义一个别名 ...
随机推荐
- webpack4+vue打包简单入门
前言 最近在研究使用webpack的使用,在查阅了数篇文章后,学习了webpack的基础打包流程. 本来就可以一删了之了,但是觉得未免有点可惜,所以就有了这篇文章,供大家参考. webpack打包的教 ...
- CSP2019
$CSP\space S$ 格雷码 $solution:$ 直接模拟即可. 时间复杂度 $O(n)$ . #include<iostream> #include<cstring> ...
- C#设计模式:解释器模式(Interpreter Pattern)
一,C#设计模式:解释器模式(Interpreter Pattern) 1,解释器模式的应用场合是Interpreter模式应用中的难点,只有满足“业务规则频繁变化,且类似的模式不断重复出现,并且容易 ...
- git基本命令和仓库操作
首先git是什么?git是github上的一个代码托管工具,是一款代码版本管理工具,github上的代码是基于git来进行托管的.github是全球的开源社区.Git 保存的不是文件的变化或者差异,而 ...
- css秘密花园一
css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; b ...
- webpack 中如何使用 vue
1. 安装vue的包: cnpm i vue -S 2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的 loader cnpm i vu ...
- 浅析DES、AES、RSA、MD5加密算法及其应用场景
对称加密算法DES 算法:一种典型的块加密方法,将固定长度的明文通过一系列复杂的操作变成同样长度的密文,块的长度为64位.同时,DES 使用的密钥来自定义变换过程,因此算法认为只有持有加密所用的密钥的 ...
- 2019-11-22-Roslyn-在多开发框架让-msbuild-的-Target-仅运行一次
title author date CreateTime categories Roslyn 在多开发框架让 msbuild 的 Target 仅运行一次 lindexi 2019-11-22 09: ...
- 使用Tensorflow搭建回归预测模型之二:数据准备与预处理
前言: 在前一篇中,已经搭建好了Tensorflow环境,本文将介绍如何准备数据与预处理数据. 正文: 在机器学习中,数据是非常关键的一个环节,在模型训练前对数据进行准备也预处理是非常必要的. 一.数 ...
- SpringBoot项目优化和Jvm调优
https://www.cnblogs.com/jpfss/p/9753215.html 项目调优 作为一名工程师,项目调优这事,是必须得熟练掌握的事情. 在SpringBoot项目中,调优主要通过配 ...