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


Posted in Javascript onSeptember 07, 2018

先上一张效果图:

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

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

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 #Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 #Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 #Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 #Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 #Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 #Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 #Javascript
You might like
php 生成唯一id的几种解决方法
2013/03/08 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
js select常用操作控制代码
2010/03/16 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
你对IPv6了解程度
2016/02/09 面试题
上海微创软件面试题
2012/06/14 面试题
岳父生日宴会答谢词
2014/01/13 职场文书
农林环境专业求职信
2014/03/13 职场文书
小学家长学校培训材料
2014/08/24 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
让子弹飞观后感
2015/06/11 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript