vue2.0可折叠列表迭代循环展示的实例

先上一张效果图：

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

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

折叠列表单独做一个组件，图标是用的图标字体中生成的钢性铸铁链接：myMusicSheetList.vue

模板div class=' sheet-list ' div class=' sheet-header ' @单击=' toggleSheet ' I class='图标字体图标-输入' ref=' toggleicon '/I span class=' sheet-header-span ' { data _ item。name } } span({ { data _ item。num } })/span/span I class=' sheet-header-I图标字体图标-setup ' @ click。stop=' showsheet菜单(data _ item。name)'/I/div-if=' showSheets ' class overflow : hidden/div class=' sheet-content-middle ' p style=' ' { { I . details _ name } }/p p style=' margin-top : 10px；font-size : 14pxcolor : # 666"{ I . details _ num } "首歌曲/p/div I class='图标图标字体图标-开关' @ click。stop=' showSheetMenu()'/I/div/div/template script导出默认值{ components : }、prop : { item : { type : object } }、data(){ return { showsheets 3360 false、data _ item 3: } }、methods 3: {//向右的小图标动画togglesheet :函数(索引){控制台。日志(这$ refs)；这个参考文献。切换图标。风格。转换=！这个。展示单？旋转(90度)' : '旋转(0)'this.showSheets=！this.showSheets }、showsheet menu : function(){ alert(1111)；} }，创建了(){ this。data _ item=this。项目；}，}/脚本样式范围。工作表列表{清除：两者；}.工作表标题{ height: 30px背景# e5e5e5相对位置：}.工作表标题I : th-child(1){行高： 30px位置：绝对；left :10 pcolor : # 666 transition : all 0.5s }。图纸-标题-I {行高： 30px绝对位置：right: 10px}。工作表标题跨度{ left : 40pxfont-size : 14px；位置：绝对；线高： 30px}.工作表内容{相对位置：宽度： 100%;display: flex}。工作表内容I { font-size : 26px绝对位置：right : 10 xtop : 50%；transform:translate(0，-50%)；}.页面内容图像{ width: 60px向左浮动：文本对齐：中心；}.工作表-内容-中间{相对位置：宽度： 100%;边框-底部： 1px实心# e5e5e5填充-底部： 10px页边距-top : 10px；左边距left: 10px}。工作表-内容-中间p { font-size : 16px宽度： 70%;color : # 666 text-溢出：省略号；空白： nowrap飞越：隐藏；}/样式主页面调用组件：home.vue

工作表列表' : item=' item '/sheet-list/div/template script从导入我的musicsheetlist '中的模板div class=' home '工作表列表v-for='(项目，索引)./././components/my musicsheetlist。vue ' export default { components : { ' sheet-list ' : my musicycheetlist }，data(){ return { sheet list : [{ id :1，name: '我创建的歌单，num:2，details:[{ details_id:1，details_name: '我喜欢的音乐，details_num:30，details _ image : ' https://timgsa。百度。com/timg？图像质量=80 size=b 9999 _ 10000 sec=1521191038714 di=117 b8 f1 d 83605767 E8 a7 faf 01 CB 9 be 9 BIM gtype=0 src=http://img src。百度。com/imgad/pic/item/8435 e5d 71190 EFC 4376916 c41 B9 d 16 fcfa 602 f . jpg ' }，{详细信息在欧洲田园般的乡村上骑单车，details_num:15，details _ image : ' https://timgsa。百度。com/timg？图像质量=80大小=b 9999 _ 10000秒=1521190642670 di=67822 EC 270160 C1 FB 21 e 67d 49 e 95 a 97 FIM gtype=0 src=http://pic30。尼比克。com/20130615/2861027 _ 140302450156 _ 2。jpg ' })，{ id:2我收藏的歌单，num:2，details:[{ details_id:1，details_name: '这应该是你比较喜欢听的歌曲了，details_num:10，details _ image : ' https://ss1。BD静态。com/70 cfvxsh _ q1ynxgkpowk1hf 6 hy/it/u=3679981803，1758706610fm=27gp=0.jpg' }，{ details_id:2，details_name: '欧美风格的音乐，安静的听，details_num:2，details _ image : ' https://ss0。BD静态。com/70 cfuhsh _ q1ynxgkpowk1hf 6 hy/it/u=2406805917，4090912031fm=27gp=0。jpg ' }]} } } } } })，methods: { }，挂载的：函数(){ } }/脚本样式作用域/样式如果不能运行请检查进口路径是否正确。

以上这篇vue2.0可折叠列表迭代循环展示的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。