标签：13 name res 歌手 height ting error VueMusic data

1.歌手列表

<template>
<div class="artists">
<ul class="list">
<router-link tag="li" :to="{name:'ArtistsDetails',params:{avatar:item.avatar_s500,name:item.name,ting_uid:item.ting_uid}}" :key="index" class="artist" v-for="(item,index) in artistsData">
<div class="pic">
<img :alt="item.name" :src="item.avatar_s500">
</div>
<div class="info">
<div>{{ item.name }}</div>
</div>
</router-link>
</ul>
</div>
</template>

<script>
export default{
name:"artists",
data(){
return{
artistsArr:["2517","7994","1091","45561","2507","245815","1077","1204","1117","82366"],
artistsData:[]
}
},
mounted(){
for(var i =0;i<this.artistsArr.length;i++){
const artistsURL = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid="+ this.artistsArr[i];
this.$axios.get(artistsURL)
.then(res => {
this.artistsData.push({
avatar_s500:res.data.avatar_s500,
name:res.data.name,
ting_uid:res.data.ting_uid
})
})
.catch(error => {
console.log(error);
})
}
}
}
</script>

<style scoped>
.artists{
padding: 0 17px;
background: #fff;
}

.list li {
padding-left: 0;
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 1px solid #F2F2F2;
}

.pic{
width: 54px;
height: 54px;
margin-right: 15px;
}

.info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 16px;
}

.pic img{
border-radius: 27px;
overflow: hidden;
}

</style>

2.歌手头部信息

<template lang="html">
<div class="art-list">
<ul class="list">
<router-link tag="li" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="song" v-for="(item,index) in listArr" :key="index">
<div class="left">
{{ item.title }}
</div>
</router-link>
</ul>
</div>
</template>

<script>
export default {
name:"artlist",
data(){
return{
listArr:[]
}
},
props:{
ting_uid:{
type:String,
default:"0"
}
},
mounted(){
const ArtList = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid="+ this.ting_uid +"&limits=10&use_cluster=1&order=2"
this.$axios.get(ArtList)
.then(res => {
this.listArr = res.data.songlist
})
.catch(error => {
console.log(error);
})
}
}
</script>

<style scoped>

.art-list{
padding: 0 17px;
}

.song{
height: 50px;
line-height: 50px;
border-bottom: 1px solid #999;
}
.left{
font-size: 18;
}

</style>

3.歌手歌曲列表

<template lang="html">
<div class="art-list">
<ul class="list">
<router-link tag="li" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="song" v-for="(item,index) in listArr" :key="index">
<div class="left">
{{ item.title }}
</div>
</router-link>
</ul>
</div>
</template>

<script>
export default {
name:"artlist",
data(){
return{
listArr:[]
}
},
props:{
ting_uid:{
type:String,
default:"0"
}
},
mounted(){
const ArtList = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid="+ this.ting_uid +"&limits=10&use_cluster=1&order=2"
this.$axios.get(ArtList)
.then(res => {
this.listArr = res.data.songlist
})
.catch(error => {
console.log(error);
})
}
}
</script>

<style scoped>

.art-list{
padding: 0 17px;
}

.song{
height: 50px;
line-height: 50px;
border-bottom: 1px solid #999;
}
.left{
font-size: 18;
}

</style>

标签：13,name,res,歌手,height,ting,error,VueMusic,data
来源： https://www.cnblogs.com/xiao-peng-ji/p/11439938.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。