先上一张效果图：
以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠。
今天在这个项目 nofollow" target="_blank" href="https://github.com/IFmiss/vue-music">https://github.com/IFmiss/vue-music 上看到操作很简单，并没有如此复杂。赶紧记录一下：
折叠列表单独做一个组件，图标是用的iconfont中生成的css链接：myMusicSheetList.vue
<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">
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;
},}
如果不能运行请检查import 路径是否正确。
以上这篇vue2.0 可折叠列表 v-for循环展示的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/30372.html