开发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>

 

相关文章:

  • 2021-12-23
  • 2021-12-23
  • 2021-12-26
  • 2021-08-30
  • 2021-10-05
  • 2021-06-30
猜你喜欢
  • 2022-12-23
  • 2021-11-17
  • 2021-09-06
  • 2022-01-24
  • 2021-11-28
  • 2021-12-23
  • 2021-12-23
相关资源
相似解决方案