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