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 路径是否正确。