Vue中对拿到的数据进行A-Z排序的实例


Posted in Javascript onSeptember 25, 2018

最近在做一个音乐app练手项目,拿到的数据是杂乱的,又不想跟视频那样重新构造数据,就自己百度使用简便的方法排序,下面说一下

我拿到的数据是这样的,我想让他按照A-Z顺序排列

Vue中对拿到的数据进行A-Z排序的实例

Vue中对拿到的数据进行A-Z排序的实例

1.对于数组的操作,官网有例子,在这里我们根据官网使用计算属性来重新排列。

computed:{
  sortList(){
  return this.singers.sort((a, b) => {
   return a['Findex'].localeCompare(b['Findex'])
  })
  }
 },

然后 使用v-for 循环出来,这样我们的数据就已经正确的排列了

<ul class="singerPosti">
  <li v-for="item in sortList" class="singerConten">
  <div class="avatar">
  <img :src="item.Fsinger_mid" ></img>
  </div>
  <div class="list">
   <span>{{item.Fsinger_name}}</span>
  </div>
 
  </li>
 </ul>

Vue中对拿到的数据进行A-Z排序的实例

Vue中对拿到的数据进行A-Z排序的实例

Vue中对拿到的数据进行A-Z排序的实例

以上这篇Vue中对拿到的数据进行A-Z排序的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array对象方法参考
Oct 03 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue单页缓存存在的问题及解决方案(小结)
Sep 25 #Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 #Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 #Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 #Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 #Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 #Javascript
vue观察模式浅析
Sep 25 #Javascript
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP 数组入门教程小结
2009/05/20 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python中退出多层循环的方法
2018/11/27 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
快速创建python 虚拟环境
2020/11/28 Python
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
部队党性分析材料
2014/02/16 职场文书
海飞丝的广告词
2014/03/20 职场文书
小学生交通安全寄语
2015/02/27 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
商业计划书范文
2019/04/24 职场文书
导游词之安徽九华山
2019/09/18 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
python 中的jieba分词库
2021/11/23 Python