注意点:

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组件;的更多相关文章

  1. winform快速开发平台 -> 工作流组件(仿GooFlow)

    对于web方向的工作流,一直在用gooflow对于目前我的winform开发平台却没有较好的工作流组件.  针对目前的项目经验告诉我们.一个工作流控件是很必要的. 当然在winform方面的工作流第三 ...

  2. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

  3. android开发之自定义组件

    android开发之自定义组件 一:自定义组件: 我认为,自定义组件就是android给我们提供的的一个空白的可以编辑的图片,它帮助我们实现的我们想要的界面,也就是通过自定义组件我们可以把我们要登入的 ...

  4. Android开发——构建自定义组件

    Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button). 文本框(TextView), 可编辑文本框(EditText), 列表框(ListView), 复选框 ...

  5. Yii Framework 开发教程Zii组件-Tabs示例

    有关Yii Tab类: http://www.yiichina.com/api/CTabView http://www.yiichina.com/api/CJuiTabs http://blog.cs ...

  6. Android开发 ---基本UI组件4:拖动事件、评分进度条、圆圈式进度条、进度条控制

    Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...

  7. jquery插件模式开发和react组件开发之间的异同

    jquery插件模式开发和react组件开发之间的异同

  8. Android开发 ---基本UI组件3:单选按钮、多选按钮、下拉列表、提交按钮、重置按钮、取消按钮

    Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个用户注册按钮 <?xml version="1.0" encoding=&q ...

  9. Android开发 ---基本UI组件2:图像按钮、单选按钮监听、多选按钮监听、开关

    Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个按钮 <?xml version="1.0" encoding=" ...

  10. kendo-ui的使用和开发自己的组件

    摘要: 前面介绍了一款非常不错的前端框架kendo-ui,如果你想阅读,请点这里.通过使用它一段时间,感觉是非常好用.下面就介绍一下如何使用它和开发自己的组件 引入: 只需要引进下面三个文件即可 ke ...

随机推荐

  1. js 数组清空 方法 汇总

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 纯jascript解决手机端拍照、选图后图片被旋转问题

    需要的js1 需要的js2 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针90° 8 180° 3 <!DOC ...

  3. 记录规则 – 销售只能看到自己的客户,经理可以看到全部

    OpenERP中的权限管理有四个层次: 菜单级别: 即,不属于指定菜单所包含组的用户看不到该菜单.不安全,只是隐藏菜单,若用户知道菜单ID,仍然可以通过指定URL访问 对象级别: 即,对某个对象是否有 ...

  4. maven 如何给web项目添加jar包依赖

      maven 如何给web项目添加jar包依赖 CreateTime--2018年4月19日19:06:21 Author:Marydon 开发工具:eclipse 1.打开pom.xml文件--& ...

  5. MyEclipse下的Debug调试技巧汇总

    首先以debug模式启动tomcat,并文件中设断点,然后运行,当程序走到断点处就会转到debug视图下 [1]快捷键(F8)直接执行程序. [2]快捷键(F5)单步执行程序,遇到方法时进入. [3] ...

  6. JProfiler 解决 Java 服务器的性能跟踪

    作者:徐建祥(netpirate@gmail.com) 时间: 2006/01/05 来自:http://www.anymobile.org 1.摘要......................... ...

  7. 如何在 Linux 下调试动态链接库

    大家都知道在 Linux 可以用 gdb 来调试应用程序,当然前提是用 gcc 编译程序时要加上 -g 参数.我这篇文章里将讨论一下用 gdb 来调试动态链接库的问题. 首先,假设我们准备这样的一个动 ...

  8. Java中创建实例化对象的几种方式

    Java中创建实例化对象有哪些方式? ①最常见的创建对象方法,使用new语句创建一个对象.②通过工厂方法返回对象,例:String s =String.valueOf().(工厂方法涉及到框架)③动用 ...

  9. Java面试基础部分合集

    写在前面:这篇文章对于在Java方面已经很牛逼的大手,就没必要看了,因为对于你们来说,这tm简直太简单了.... 面试我们都经历过,你真的懂面试吗?针对面试我只想说一点,面试的目的不是让考官知道你怎么 ...

  10. POJ 1836 Alignment (双向DP)

    Alignment Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 10804   Accepted: 3464 Descri ...