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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
vuex与组件联合使用的方法
May 10 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
Vue使用NProgress进度条的方法
Sep 21 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实现商品成交时发送短信功能
2016/05/11 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python中字符串的处理技巧分享
2016/09/17 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
解决python replace函数替换无效问题
2020/01/18 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
pandas按条件筛选数据的实现
2021/02/20 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
教学改革实施方案
2014/03/31 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
合作协议书模板2014
2014/09/26 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
综治工作汇报材料
2014/10/27 职场文书
安全承诺书格式范本
2015/04/28 职场文书
负责培养人意见
2015/06/05 职场文书
学校运动会开幕词
2016/03/03 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python