网易云极简实现（发现歌单）

同上一篇一样，先建函数，链接接口

export function getTenner(type=30){
    return axios.get(`${baseUrl}/personalized?limit=${type}`)
}

创建生命周期函数，分别拿到数据和设置前端页面展示

 onMounted(async () => {
      //view与model绑定成功之后生命周期函数
      let res = await getTenner();
    //   console.log(res.data.result);
      musics.musicList = res.data.result;
    });
    onUpdated(() => {
      //view或者model发生改变后触发的生命周期函数
      var swiper = new Swiper("#musicSwiper", {
        slidesPerView: 3, //每一屏显示几个内容
        spaceBetween: 10, //每个滑块之间的间距
      });
    });

后面不要忘记return

页面展示

 <router-link
              :to="{ path: '/listview', query: { id: item.id } }"
              class="swiper-slide"
              v-for="(item, i) in musics.musicList"
              :key="i"
            >
              <img :src="item.picUrl" alt="" />
              <div class="name">{{ item.name }}</div>
              <div class="count">
             
                <span>{{ changeValue(item.playCount) }}</span>
              </div>
            </router-link>

这里我没有写矢量图，router-link为后面点击进入播放列表做准备