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)文章
vueJs實現(xiàn)DOM加載完之后自動下拉到底部的實例代碼
這篇文章主要介紹了vueJs實現(xiàn)DOM加載完成之后自動下拉到底部的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vue?props傳遞的類型和寫法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vant(ZanUi)結(jié)合async-validator實現(xiàn)表單驗證的方法
這篇文章主要介紹了vant(ZanUi)結(jié)合async-validator實現(xiàn)表單驗證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue cli3適配所有端方案的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue3非遞歸渲染Tree組件的初步實現(xiàn),文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下2024-05-05
vue通過watch對input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過watch對input做字?jǐn)?shù)限定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
移動端網(wǎng)頁的日常開發(fā)中,偶爾會包含一些渲染長列表的場景，本文主要介紹了vue 虛擬滾動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
關(guān)于nuxt?store中保存localstorage的問題
這篇文章主要介紹了關(guān)于nuxt?store中保存localstorage的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了Vue3中v-model語法糖的三種寫法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要為大家詳細介紹了Vue實現(xiàn)拖拽改變列表順序的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04