圆月山庄资源网 Design By www.vgjia.com
先上一张效果图:
以前用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="/UploadFiles/2021-04-02/i.details_image"><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 "htmlcode"><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循环展示的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年10月09日
2024年10月09日
- Ben Hum《Ben Hum (Acoustic Version)》[FLAC/分轨][310.19MB]
- 徐璨宾《井底的蚯蚓》[320K/MP3][78.77MB]
- 碧蓝航线国庆金秋版本重磅上线 新玩法3D宿舍系统闪亮登场
- 自在西游自在服即将在10月1日开启 入驻即享豪礼满满
- 炉石传说最强术士卡组是哪个 术士最强天梯卡组推荐一览
- 炉石传说最强萨尔卡组是哪个 萨尔最强天梯卡组推荐一览
- 炉石传说最强潜行者卡组是哪个 潜行者最强天梯卡组推荐一览
- 银霞.1983-《爱迷惑我·我住小楼中》台湾复刻版[WAV+CUE]
- [雨果唱片]粤曲名家-《再折长亭柳》[WAV+CUE]
- 刘德华1998-你是我的女人[香港第二版][WAV]
- 压迫感谁最强?外媒评选恐怖游戏最佳女反派
- 还没正式发售:《寂静岭2:重制版》Steam玩家峰值近9000人
- 别搞政确了!超95%国外玩家反对强制包容性
- 《暗喻幻想:ReFantazio》试玩:ATLUS的自我挑战?
- 《憧憬成为魔法少女》第二季 反转魔法少女题材再掀热潮