Vue 音乐列表组件 - 发现好歌单

<template>
  <div class="music-list">
    <div class="top">
      <h4 class="title">发现好歌单</h4>
      <div class="more">查看更多</div>
    </div>
    <div class="mlist">
      <router-link :to="{path: '/listview', query: {id : item.id}}" class="m-item" v-for="item in musilListInfo" :key="item.id">
        <img :src="item.picUrl" alt="">
        <span class="foot">{{ item.name }}</span>
        <span class="count">{{ parseInt(item.playCount/10000) }}万</span>
      </router-link>
    </div>
  </div>
</template>
<script>
  import { ref } from 'vue'
  import musicList from './music.json' // 引入本地 music.json 文件

  export default {
    setup() {
      const musilListInfo = ref(musicList)

      return {
        musilListInfo
      }
    }
  }
</script>