事例

网易云

App.vue

<template>
  <div id="app">
    <Music :item="item" v-for="item of music" :key="item.id"></Music>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import Music from "./components/Music.vue";
import axios from 'axios';
@Component({
  components: {
    Music,
  },
})
export default class App extends Vue {
  @Provide() music: Array<Object> = [];
  mounted():void{
    axios.get("http://localhost:3000/top/playlist?cat=华语").then(res =>{
      console.log(res.data.playlists);
      this.music= res.data.playlists; 
    })
  }
}
</script>
<style>
#app{
  width: 800px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 5px;
  justify-items: center;
}
</style>

Music.vue

<template>
  <div class="item">
    <!-- 快捷键：vbase -->
    <img :src="item.coverImgUrl" alt="" />
    <p class="title">{{ item.name | handleFilter}}</p>
    <span class="count">{{ item.playCount | handleSum}}</span>
  </div>
</template>
<script lang="ts">
import {Component, Vue,Prop} from "vue-property-decorator";
@Component({
     filters: {
    handleSum(value:any) {
      if (value > 100000000) {
        return Math.floor(value / 100000000) + "亿";
      } else if (value > 10000) {
        return Math.floor(value / 10000) + "万";
      } else {
        return value;
      }
    },
    handleFilter(val:any) {
      if (val.length > 14) {
        return val.slice(0, 14) + "...";
      }
      return val;
    },
  },
})
     export default class Hello extends Vue {
         @Prop() item !:object;
    }
</script>
<style scoped>
.item {
  width: 200px;
  position: relative;
}
img {
  width: 200px;
  height: 200px;
}
.title {
  font-size: 14px;
}
.count {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgb(120, 228, 228);
}
</style>