vue2.0 可折叠列表 v-for循环展示的实例
|
先上一张效果图：
以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠。 今天在这个项目 上看到操作很简单，并没有如此复杂。赶紧记录一下： 折叠列表单独做一个组件，图标是用的iconfont中生成的css链接：myMusicSheetList.vue
({{data_item.num}})
<div v-if="showSheets" class="sheet-content" v-for="i in data_item.details">
export default {
components:{},props: {
item:{
type:Object
}
},data(){
return{
showSheets:false,data_item:{}
}
},methods:{
.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循环展示的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
