Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例
更新時(shí)間：2018年09月25日 15:16:50 作者：愛吃排骨
今天小編就為大家分享一篇Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
最近在做一個(gè)音樂app練手項(xiàng)目，拿到的數(shù)據(jù)是雜亂的，又不想跟視頻那樣重新構(gòu)造數(shù)據(jù)，就自己百度使用簡(jiǎn)便的方法排序，下面說一下
我拿到的數(shù)據(jù)是這樣的，我想讓他按照A-Z順序排列
1.對(duì)于數(shù)組的操作，官網(wǎng)有例子，在這里我們根據(jù)官網(wǎng)使用計(jì)算屬性來重新排列。
computed:{
sortList(){
return this.singers.sort((a, b) => {
return a['Findex'].localeCompare(b['Findex'])
})
}
},
然后 使用v-for 循環(huán)出來，這樣我們的數(shù)據(jù)就已經(jīng)正確的排列了
<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中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vant list組件滾動(dòng)保留滾動(dòng)條位置
這篇文章主要介紹了vant list組件滾動(dòng)保留滾動(dòng)條位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue3偵聽器的實(shí)現(xiàn)原理詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了Vue 2.0 偵聽器 watch屬性代碼詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了解決vue無法設(shè)置滾動(dòng)位置的問題 ,需要的朋友可以參考下2018-10-10
本篇文章主要介紹了淺談vue中慎用style的scoped屬性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
本文主要介紹了vue v-on傳遞參數(shù)和事件修飾符的使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問題小結(jié)
這篇文章主要介紹了vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問題小結(jié),需要的朋友可以參考下2018-03-03
vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解
這篇文章主要介紹了vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了Vue組件化通訊的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06