开发song-list组件;

注意点:

1.song-list的高度是通过计算动态获取的;

2.可以直接在{{}}调用函数,来显示函数的返回值;

<template>
     <div class="song-lsit">
       <ul>
         <li class="song-item" v-for="(song,index) of songs">
           <div class="song-name">{{song.name}}</div>
           <div class="describe">{{getDesc(song)}}</div>
         </li>
       </ul>
     </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props:{
      songs:{
        type:Array,
        default:function () {
          return []
        }
      }
    },
    methods:{
     getDesc(song){
       return  `${song.singer}& ${song.album}`
      }
    },
    created(){
      console.log(this.songs)
    }
  }

</script>
<style>

  .song-item{
    display: flex;
    flex-direction:column;
    height: 64px;
    padding: 21px;
    color: #fff;
  }
  .song-name{
    flex:1;
    line-height: 32px;
  }
  .describe{
    flex:1;
    color:rgba(255,255,255,0.3);
  }
</style>

猜你喜欢

转载自www.cnblogs.com/yangguoe/p/9462225.html