vue2.0 可折叠列表 v-for循环展示的实例
作者:qq_27717857 时间:2024-04-28 09:32:22
先上一张效果图:
以前用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 路径是否正确。
来源:https://blog.csdn.net/qq_27717857/article/details/79582097
标签:vue2.0,列表,v-for,循环
0
投稿
猜你喜欢
asp中文URL编码server.urlencode
2008-08-08 11:22:00
JavaScript实现全选取消效果
2023-08-27 16:26:42
PyTorch搭建ANN实现时间序列风速预测
2022-11-28 23:38:28
在Python中通过getattr获取对象引用的方法
2023-08-24 23:32:33
Pycharm如何运行.py文件的方法步骤
2023-03-13 12:32:37
用文本+ASP打造新闻发布系统
2009-02-02 09:31:00
不完全HTML在线编辑器收集
2007-11-08 12:20:00
交互因视觉设计而更完美
2008-05-31 17:22:00
vuex actions异步修改状态的实例详解
2024-05-10 14:12:50
对python抓取需要登录网站数据的方法详解
2023-01-18 04:58:41
如何将Yolov5的detect.py修改为可以直接调用的函数详解
2021-12-12 22:21:28
真正好用的js验证上传文件大小的简单方法
2024-04-22 13:04:52
python下如何让web元素的生成更简单的分析
2023-01-28 23:46:34
详解Vue中的watch和computed
2024-05-05 09:10:52
python实现PDF中表格转化为Excel的方法
2022-05-31 23:46:38
element-ui表格数据转换的示例代码
2023-07-02 17:00:23
Pycharm取消py脚本中SQL识别的方法
2023-10-30 16:23:13
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2021-05-13 00:29:01
go实现反转链表
2024-02-07 12:54:59
python的flask框架难学吗
2023-08-18 15:34:32