开发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>
开发song-list组件;的更多相关文章
- winform快速开发平台 -> 工作流组件(仿GooFlow)
对于web方向的工作流,一直在用gooflow对于目前我的winform开发平台却没有较好的工作流组件. 针对目前的项目经验告诉我们.一个工作流控件是很必要的. 当然在winform方面的工作流第三 ...
- winform快速开发平台 -> 基础组件之分页控件
一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...
- android开发之自定义组件
android开发之自定义组件 一:自定义组件: 我认为,自定义组件就是android给我们提供的的一个空白的可以编辑的图片,它帮助我们实现的我们想要的界面,也就是通过自定义组件我们可以把我们要登入的 ...
- Android开发——构建自定义组件
Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button). 文本框(TextView), 可编辑文本框(EditText), 列表框(ListView), 复选框 ...
- Yii Framework 开发教程Zii组件-Tabs示例
有关Yii Tab类: http://www.yiichina.com/api/CTabView http://www.yiichina.com/api/CJuiTabs http://blog.cs ...
- Android开发 ---基本UI组件4:拖动事件、评分进度条、圆圈式进度条、进度条控制
Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...
- jquery插件模式开发和react组件开发之间的异同
jquery插件模式开发和react组件开发之间的异同
- Android开发 ---基本UI组件3:单选按钮、多选按钮、下拉列表、提交按钮、重置按钮、取消按钮
Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个用户注册按钮 <?xml version="1.0" encoding=&q ...
- Android开发 ---基本UI组件2:图像按钮、单选按钮监听、多选按钮监听、开关
Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个按钮 <?xml version="1.0" encoding=" ...
- kendo-ui的使用和开发自己的组件
摘要: 前面介绍了一款非常不错的前端框架kendo-ui,如果你想阅读,请点这里.通过使用它一段时间,感觉是非常好用.下面就介绍一下如何使用它和开发自己的组件 引入: 只需要引进下面三个文件即可 ke ...
随机推荐
- spring task:annotation-driven 定时任务
1.配置文件加上<task:annotation-driven/> 2.要运行的方法前加上 @Scheduled(cron="0 00 12 1 * ?") //每月 ...
- webservice系统学习笔记9-使用契约优先的方式的一个服务端demo(隐式传Header信息)
服务器端: 1.编写wsdl文件 <?xml version="1.0" encoding="UTF-8" standalone="no&quo ...
- Loadrunner脚本编程(2)-VuGen脚本文件的开发过程
http://www.360doc.com/content/10/0806/13/1698198_44076570.shtml 1.定义测试项目的目标,环境,脚本,测试数据,硬件等.脚本应该符合编码规 ...
- 500 OOPS: chroot
FTP登录时报错: 1.500 OOPS: chroot 解决方法:关闭SElinux 2.500 OOPS: vsftpd: refusing to run with writable root i ...
- keychain实现ssh对秘钥免登陆免输入密码
Linux同一网段实现密码认证,管理. 项目:https://github.com/funtoo/keychain 01.生成秘钥 ssh-keygen -t rsa # -t rsa | ds ...
- 非IT人士的云栖酱油之行 (程序猿迷妹的云栖之行)
摘要: 熟悉我的人都知道,我是一个贪玩儿且不学无术的姑娘,对于互联网我也是知之甚少:这次去到杭州参加阿里巴巴集团主办的为期4天的科技大会也是很例外:但是不得不说这次的会议真是让我很震惊.今天我就和大家 ...
- C#基础蛋疼到爆的Byte类型表数范围之网兜毛衣见解……
事实上写这篇对Byte类型表数范围的文章,真的是蛋疼+蛋疼+蛋疼,每每看到Byte表数范围这一块.都对-128如此的陌生与迷茫.操蛋的Byte,操蛋的人生-- 熊孩子出场:Byte 恶作剧结果:表数范 ...
- 转发:微信小程序-template模板使用
转载于CSDN--[向朔1992]处.(部分内容根据实际情况有所修改) 小程序实现主页面调用次级页面的wxml页面内容,如下图: 根据上图,我们可以将图片和图片信息作为一个goodsList.wx ...
- [转]一千行MySQL学习笔记
Shocker /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL ...
- sigmoid 函数与 softmax 函数
sigmoid 函数与 softmax 函数 1. sigmoid 函数 sigmoid 函数又称:logistic函数,逻辑斯谛函数.其几何形状即为一条sigmoid曲线. lo ...