开发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>
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;

浙公网安备 33010602011771号