vue2.0 可折叠列表 v-for循环展示的实例


Posted in Javascript onSeptember 07, 2018

先上一张效果图:

vue2.0 可折叠列表 v-for循环展示的实例

以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠。

今天在这个项目 https://github.com/IFmiss/vue-music 上看到操作很简单,并没有如此复杂。赶紧记录一下:

折叠列表单独做一个组件,图标是用的iconfont中生成的css链接:myMusicSheetList.vue

<template>
 <div class="sheet-list">
 <div class="sheet-header" @click="toggleSheet">
 <i class="icon iconfont icon-enter" ref="toggleicon"></i>
 <span class="sheet-header-span">{{data_item.name}} <span> ({{data_item.num}}) </span></span>
 <i class="sheet-header-i icon iconfont icon-setup" @click.stop="showSheetMenu(data_item.name)"></i>
 </div>

 <div v-if="showSheets" class="sheet-content" v-for="i in data_item.details">
 <div class="sheet-content-image">
 <img :src="i.details_image" width="50" height="50" style="padding: 5px;overflow: hidden">
 </div>
 <div class="sheet-content-middle">
 <p style="">{{i.details_name}}</p>
 <p style="margin-top: 10px;font-size: 14px;color: #666">{{i.details_num}}首歌曲</p>
 </div>
 <i class="icon iconfont icon-switch" @click.stop="showSheetMenu()"></i>
 </div>
 </div>
</template>
<script>
export default {
 components:{},
 props: {
 item:{
 type:Object
 }
 },
 data(){
 return{
 showSheets:false,
 data_item:{}
 }
 },
 methods:{

//向右的小图标动画
 toggleSheet:function(index){
 console.log(this.$refs);
 this.$refs.toggleicon.style.transform = !this.showSheets ? 'rotate(90deg)' : 'rotate(0)'
this.showSheets = !this.showSheets
 },
 showSheetMenu:function(){
 alert(1111);
 }
 },
 created(){
 this.data_item = this.item;
 },
}
</script>
<style scoped>
.sheet-list{
clear: both;
}
.sheet-header{
height: 30px;background: #e5e5e5;position: relative;
}
.sheet-header i:nth-child(1){
line-height: 30px;position:absolute;
left:10px;
color:#666;
transition:all 0.5s;
}
.sheet-header-i{
line-height: 30px;position: absolute;right: 10px;
}
.sheet-header-span{
left: 40px;font-size: 14px;position:absolute;line-height: 30px;
}
.sheet-content{
position: relative;width: 100%;display: flex;
}
.sheet-content i{
font-size: 26px;position: absolute;right: 10px;top: 50%;transform:translate(0,-50%);
}
.sheet-content-image{
width: 60px;float: left;text-align: center;
}
.sheet-content-middle{
position: relative;width: 100%;border-bottom: 1px solid #e5e5e5;padding-bottom: 10px;margin-top: 10px;margin-left: 10px;
}
.sheet-content-middle p{
font-size: 16px;width: 70%;color: #666;text-overflow:ellipsis;white-space: nowrap;overflow:hidden;
}
</style>

主页面调用组件:home.vue

<template>
 <div class="home">

<sheet-list v-for="(item,index) in sheetList" :item="item"></sheet-list>
 </div>
</template>

<script>

import myMusicSheetList from './../../components/myMusicSheetList.vue'

export default {
 components:{'sheet-list':myMusicSheetList},
 data () {
 return {
 sheetList:[{
 id:1,
 name:'我创建的歌单',
 num:2,
 details:[{
 details_id:1,
 details_name:'我喜欢的音乐',
 details_num:30,
 details_image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521191038714&di=117b8f1d83605767e8a7faf01cb9be9b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8435e5dde71190efc4376916c41b9d16fcfa602f.jpg'
 },{
 details_id:2,
 details_name:'在欧洲田园般的乡村上骑单车',
 details_num:15,
 details_image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521190642670&di=67822ec270160c1fb21e67d49e95a97f&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130615%2F2861027_140302450156_2.jpg'
 }]
 },{
 id:2,
 name:'我收藏的歌单',
 num:2,
 details:[{
 details_id:1,
 details_name:'这应该是你比较喜欢听的歌曲了',
 details_num:10,
 details_image:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3679981803,1758706610&fm=27&gp=0.jpg'
 },{
 details_id:2,
 details_name:'欧美风格的音乐,安静的听',
 details_num:2,
 details_image:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2406805917,4090912031&fm=27&gp=0.jpg'
 }]
 }]
 }
 },
 methods: {
 
 },
 mounted:function(){
 
 }
}
</script>
<style scoped>
</style>

如果不能运行请检查import 路径是否正确。

以上这篇vue2.0 可折叠列表 v-for循环展示的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
jquery插件格式实例分析
Jun 16 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
原生js实现吸顶效果
Mar 13 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 #Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 #Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 #Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 #Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 #Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 #Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 #Javascript
You might like
php执行sql语句的写法
2009/03/10 PHP
php支付宝接口用法分析
2015/01/04 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python画图高斯分布的示例
2019/07/10 Python
python之array赋值技巧分享
2019/11/28 Python
Python 列表的清空方式
2020/01/13 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
网络工程师个人的自我评价范文
2013/10/01 职场文书
企业负责人任命书
2014/06/05 职场文书
火箭队口号
2014/06/18 职场文书
实验室标语
2014/06/21 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书