开发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 ...
随机推荐
- 实现 1像素border
border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: ...
- Linux see 网卡当前流量
linux see网卡的当前流量 sar –n DEV 1 2 命令后面1 2 意思是:每一秒钟取1次值,取2次. DEV显示网络接口信息 -n参数很有用,他有6个不同的开关:DEV | EDEV ...
- eclipse Java compiler level does not match the version of the installed Java project facet.
eclipse Java compiler level does not match the version of the installed Java project facet. Create ...
- c# 判断端口是否被占用
这里主要用到:命名空间System.Net.NetworkInformation下定义了一个名为IPGlobalProperties的类 具体代码 class PortHelper { #region ...
- ls -lrt
1,按照时间升序 命令:ls -lrt 详细解释: -l use a long listing format 以长列表方式显示(详细信息方式) -t sort by modification time ...
- Total Commander:文件管理工具,共享软件
http://xbeta.info/tc/ Total Commander V8.0:文件管理工具,共享软件,适用于Windows® 95/98/ME/NT/2000/XP/Vista/7 和 Win ...
- Linux命令-防火墙命令:iptables
iptables详解--转 查看防火墙设置: 第一种方式: cat /etc/sysconfig/iptables 第二种方式: iptables -L -n -v 设置防火墙: 第一种方式: ipt ...
- iOS - UnitTests 单元测试
1.UnitTests 在计算机编程中,单元测试(又称为模块测试, Unit Testing)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编 ...
- 【jQuery】将form表单通过ajax实现无刷新提交
//将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, t ...
- Python学习笔记010——函数文档字符串
函数文档字符串documentation string (docstring)是在函数开头,用来解释其接口的字符串.简而言之:帮助文档 包含函数的基础信息 包含函数的功能简介 包含每个形参的类型,使用 ...