以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠。
今天在这个项目https://github.com/IFmiss/vue-music上看到操作很简单,并没有如此复杂。赶紧记录一下:
折叠列表单独做一个组件,图标是用的iconfont中生成的css链接:myMusicSheetList.vue
& lt; template>
& lt; div类="单"比;
& lt; div类=" sheet-header " @click=皌oggleSheet”比;
& lt;我class="图标iconfont icon-enter“ref=皌oggleicon祝辞& lt;/i>
& lt;跨类=" sheet-header-span "在{{data_item.name}} & lt; span>({{data_item.num}}) & lt;/span> & lt;/span>
& lt;我class=" sheet-header-i图标iconfont icon-setup“@click.stop=皊howSheetMenu (data_item.name)”祝辞& lt;/i>
& lt;/div>
& lt; div v=" showSheets " class="单内容")=拔以赿ata_item.details”比;
& lt; div类=皊heet-content-image”比;
& lt; img src=" https://www.yisu.com/zixun/i.details_image "宽度=?0”高度=?0”比;
& lt;/div>
& lt; div类=皊heet-content-middle”比;
& lt; p在{{i.details_name}} & lt;/p>
& lt; p在{{i.details_num}}首歌曲& lt;/p>
& lt;/div>
& lt;我class="图标iconfont icon-switch“@click.stop=皊howSheetMenu()“祝辞& lt;/i>
& lt;/div>
& lt;/div>
& lt;/template>
之前
& lt; script>
出口默认{
组件:{},
道具:{
项目:{
对象类型:
}
}，
数据(){
返回{
showSheets:假的,
data_item: {}
}
}，
方法:{//向右的小图标动画
toggleSheet:函数(指数){
console.log参(。);
refs.toggleicon.style美元。变换=!这。showSheets & # 63;“旋转(90度)”:“旋转(0)”
这一点。showSheets=! this.showSheets
}，
showSheetMenu:函数(){
警报(1111);
}
}，
创建(){
这一点。data_item=this.item;
}，
}
& lt;/script>
之前
& lt; scoped>风格;
.sheet-list {
明确:;
}
.sheet-header {
高度:30 px;背景:# e5e5e5;位置:相对;
}
.sheet-header我:nth-child (1) {
行高:30 px;位置:绝对;
左:10 px;
颜色:# 666;
过渡:所有0.5年代;
}
.sheet-header-i {
行高:30 px;位置:绝对;右:10 px;
}
.sheet-header-span {
左:40 px;字体大小:14 px;位置:绝对的,行高:30 px;
}
.sheet-content {
位置:相对;宽度:100%;显示:flex;
}
.sheet-content我{
字体大小:26 px;位置:绝对;右:10 px;: 50%;变换:翻译(0 -50%);
}
.sheet-content-image {
宽度:60 px;浮动:左;text-align:中心;
}
.sheet-content-middle {
位置:相对;宽度:100%;边界底部:1 px固体# e5e5e5; padding-bottom: 10 px; margin-top: 10 px; margin-left: 10 px;
}
.sheet-content-middle p {
字体大小:16 px;宽度:70%;颜色:# 666;文本溢出:省略号;空白:nowrap;}溢出:隐藏;
}
& lt;/style>
& lt; template>
& lt; div类=凹摇北?
& lt;单v="(项目、索引)sheetList”:项=拔锲贰弊４? lt;/sheet-list>
& lt;/div>
& lt;/template>
& lt; script>
从“进口myMusicSheetList。/. ./. ./组件/myMusicSheetList.vue '
出口默认{
组件:{“单”:myMusicSheetList},
数据(){
返回{
sheetList: [{
id: 1、
名称:“我创建的歌单的,
num: 2
细节:[{
details_id: 1、
details_name:“我喜欢的音乐”,
details_num: 30,
details_image: https://timgsa.baidu.com/timg& # 63; image&质量=80,大?b9999_10000&秒=1521191038714,di=117 b8f1d83605767e8a7faf01cb9be9b& imgtype=0, src=https://www.yisu.com/zixun/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& # 63; image&质量=80,大?b9999_10000&秒=1521190642670,di=67822 ec270160c1fb21e67d49e95a97f& imgtype=0, src=https://www.yisu.com/zixun/http%3A%2F%2Fpic30.nipic.com%2F20130615%2F2861027_140302450156_2.jpg '
})
}，{
id: 2
名称:“我收藏的歌单的,
num: 2
细节:[{
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”
})
})
}
}，
方法:{
}，
安装:函数(){
}
}
& lt;/script>
& lt; scoped>风格;
& lt;/style>
