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 相关文章推荐
JS 去除Array中的null值示例代码
Nov 20 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 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安全性问题中的:Null 字符问题
2013/06/21 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
企业统计员岗位职责
2013/12/13 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
教师党员自我评价范文
2015/03/04 职场文书
举起手来观后感
2015/06/09 职场文书
培训后的感想
2015/08/07 职场文书
初中班主任教育随笔
2015/08/15 职场文书
2016春季运动会前导词
2015/11/25 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技