注意点:
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>