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

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

我拿到的数据是这样的，我想让他按照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排序的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js或js实现中文A-Z排序的方法

    实现中文按照A-Z的方法,可以在vue的methods里面写入: methods:{ pySort:function(arr,empty){ var $this = this; if(!String.prototype.localeCompare) return null; var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split(''); var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');

  • Vue数组更新及过滤排序功能

    Vue数组更新及过滤排序功能

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项 shift() 移除数组中的第一个项并返回该项,同时数组的长度减1 unshift() 在数组前端添加任意个

  • vue 根据数组中某一项的值进行排序的方法

    vue中数组和对象的排序 1数组排序 <div id="app"> <ul> <li v-for="a in arr1">{{a}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ arr:[1,4,5,2,3,44] },compute

  • vue数组对象排序的实现代码

    前言 最近在看vue的教学视频,正好学到的数组对象排序方法,在这跟大家分享一下,如有不足之处,请赐教. 普通数组的排序 先看代码: <div class="app"> <h1>v-for实例</h1> <hr> <ol> <li v-for="number in numbers">{{number}}</li> </ol> </div> <script&

  • Vue 中使用vue2-highcharts实现曲线数据展示的方法

    1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

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

    最近在做一个音乐app练手项目,拿到的数据是杂乱的,又不想跟视频那样重新构造数据,就自己百度使用简便的方法排序,下面说一下 我拿到的数据是这样的,我想让他按照A-Z顺序排列 1.对于数组的操作,官网有例子,在这里我们根据官网使用计算属性来重新排列. computed:{ sortList(){ return this.singers.sort((a, b) => { return a['Findex'].localeCompare(b['Findex']) }) } }, 然后 使用v-for

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • vue中选中多个选项并且改变选中的样式的实例代码

    1:HTML: <ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</d

  • vue中各组件之间传递数据的方法示例

    vue中各组件之间传递数据的方法示例

    前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.

  • vue中异步数据获取方式(确保数据被获取)

    vue中异步数据获取方式(确保数据被获取)

    目录 vue中异步数据获取 1.获取异步数据,通过async/await限制 2.将一个方法的返回值 vue处理数据(同步,异步)问题简单记录 情况介绍 最终解决方法:new Promise() vue中异步数据获取 1.获取异步数据,通过async/await限制 import { fetchList } from '@/api/article' //在created中即开始获取 created() {     this.getList() } methods:{     async getL

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

  • vue中el-table两个表尾合计行联动同步滚动条实例代码

    vue中el-table两个表尾合计行联动同步滚动条实例代码

    目录 问题描述 效果图 思路 完整代码 总结 问题描述 最近产品提出一个需求,说是做表格呈现统计数据,不过数据源是来自两个地方的,所以需要做两个表格去呈现数据,同时在表格最后统计数据. 效果图 我们先看一下效果图 思路 获取对应的两个表格设置滚动条的dom,并通过Element.scrollLeft去设置滚动的距离 官方文档:developer.mozilla.org/zh-CN/docs/… 滚动容器(审查元素即可得知): 完整代码 自己演示的话,直接复制粘贴即可,代码中包含注释 <templ

  • C++中实现把表的数据导出到EXCEL并打印实例代码

    实现把表的数据导出到EXCEL并打印实例代码 首先加入这两句: #include "utilcls.h" #include "comobj.hpp" 下面正式开始: void __fastcall TMainForm::ToExcel(TADOQuery *TT,AnsiString str) {//TT为被导出数据的表,str为命令(具体看代码底部的if语句) #define PG OlePropertyGet #define PS OlePropertySet

随机推荐