vue2.0 可折叠列表 v-for循环展示的实例

前端之家收集整理的这篇文章主要介绍了vue2.0 可折叠列表 v-for循环展示的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先上一张效果图:

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

今天在这个项目 nofollow" target="_blank" href="https://github.com/IFmiss/vue-music">https://github.com/IFmiss/vue-music 上看到操作很简单,并没有如此复杂。赶紧记录一下:

折叠列表单独做一个组件,图标是用的iconfont中生成的css链接:myMusicSheetList.vue

({{data_item.num}})

<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;
},}

.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; }

页面调用组件:home.vue

<sheet-list v-for="(item,index) in sheetList" :item="item">

如果不能运行请检查import 路径是否正确。

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

原文链接:https://www.f2er.com/vue/30372.html

猜你在找的Vue相关文章