今天写项目的时候遇到了歌手排序的问题，联想到了我们平时的手机通讯录侧栏字母排序，按照ABCDE这样的顺序对名字进行排序。
我们先来看看效果
那就用vue来实现一遍
首先新建一个vue页面，取名为helloworld.vue
在页面里写入内容
{{singerTopTag | filterSingerTag}}
![]()
{{fitem.Fsinger_name}}
- {{item == `hot` &＃63; `热` : item}}
我是使用的qq音乐接口，获取的数据需要进行处理，如果觉得麻烦可以自己写静态数据来代替
数据的格式
const list = [
{
tag:`A`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`奥巴里`
}
]
}，
{
tag:`B`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`BIGBANG`
}
]
},
{
tag:`C`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`蔡依林`
}
]
},
{
tag:`D`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`邓紫棋`
}
]
},
]
再者还要注意页面的img标签，直接复制上面的数据的话要对img标签进行修改，去掉http那一串，直接用:src="item.img"代替
const list = [
{
tag:`A`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`奥巴里`
}
]
}，
{
tag:`B`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`BIGBANG`
}
]
},
{
tag:`C`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`蔡依林`
}
]
},
{
tag:`D`,
data:[
{
img:`https://timgsa.baidu.com/timg&＃63;image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
Fsinger_name:`邓紫棋`
}
]
},
]
总结
以上所述是小编给大家介绍的vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有