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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
原生JS实现不断变化的标签
May 22 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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中$this-&amp;gt;含义分析
2009/11/29 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
使用js 设置url参数
2013/07/08 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python集合类型用法分析
2015/04/08 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python中树与树的表示知识点总结
2019/09/14 Python
Python for循环与getitem的关系详解
2020/01/02 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
公证书样本
2014/04/10 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
2016秋季运动会前导词
2015/11/25 职场文书