用Vue实现好友分组效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab标签</title>
<style>
body {background-color: #999;
}
#box {max-width: 360px;min-height: 640px;background-image: linear-gradient(to right bottom, #432b8b, #89049e);background-size: cover;margin: 10px auto;padding: 20px;box-sizing: border-box;
}
.panel {margin-bottom: 10px;background-color: rgba(0,0,0,.3);border-radius: 5px;overflow: hidden;
}
.panel-header {position: relative;padding: 10px 15px 10px 32px;cursor: pointer;color: rgba(255,255,255,.6);
}
.panel-header:before {position: absolute;left: 15px;top: 14px;content: "";width: 0;height: 0;border-width: 7px 0 7px 8px;border-style: solid;border-color: transparent;border-left-color: rgba(255,255,255,.3);transition: all .3s;
}
.active .panel-header {background-color: rgba(228,0,127,.8);transform: rotateZ(0);color: rgb(255,255,255);
}
.active .panel-header:before {transform-style: preserve-3d;transform: rotateZ(90deg);transition: all .3s;border-left-color: rgba(255,255,255,.6);
}
.panel-body {padding: 10px 20px;
}
.list {margin: 0;padding: 0;list-style: none;
}
.list li {line-height: 2em;
}
.list li a {color: rgba(255,255,255,.4);text-decoration: none;
}
.list li a:hover {color: #fff;
}
</style>
</head>
<body>
<main id="box"><div class="panel" v-for="panel,index in panels" :class="{active:index===currentIndex}"><div class="panel-header" @click="panelSwitch(index)">{{panel.title}}</div><div class="panel-body" v-show="index===currentIndex"><ul class="list"><li v-for="item in panel.list"><a href="#">{{item}}</a></li></ul></div></div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm=new Vue({el:'#box',data:{panels: [            {title: '中国',list: ['北京市','上海市','广州市','深圳市']},{title: '美国',list: ['纽约市','洛杉矶市','芝加哥市','拉斯维加斯市']},{title: '英国',list: ['伦敦市','伯明翰市','利兹市','格拉斯哥市']}],currentIndex: '' //存储当前索引值},methods:{panelSwitch(index){this.currentIndex = this.currentIndex === index ? '' : index; //当前索引值等于当前索引值，清空索引值；否则设置为当前索引值}}
});
</script>
</body>
</html>

用Vue实现好友分组效果相关推荐

UITableView的折叠收缩和QQ好友分组效果
可折叠展开的tableView,QQ好友分组列表 demo下载地址https://github.com/zhengwenming/ExpandTableView 原理分析:这个可以折叠的table ...
JTree实现好友分组示例
简单的好友分组效果展示: 示例代码: /*** Title: Friend* Description: 好友* @author Herrona*/ public class Friend {int i ...
14_自定义ItemDecoration实现qq好友列表分组效果
14_自定义ItemDecoration实现qq好友列表分组效果一.先上效果二.RecyclerView实现简单分组 RecyclerView比较常规的用法,显示多item布局,直接上代码: pu ...
android 仿qq好友列表分组效果及联系人分组效果
历史记录仿QQ好友列表的动态效果以及联系人的分组效果 QQ朋友分组的功能做的不错,大家都很认可,那么到底他的分组并且滑动的时候,标题能停留在顶部是如何实现的呢?今天从网上搜索了一下资料,自己运行了 ...
用ExpandableListView实现好友分组
上篇关于好友分组,采用的是listview,这篇随便写了个demo,用ExpandableListView实现说到ExpandableListView,其实我们都可以去实现一个相关的adapter, ...
Qt可拖拽排序表格（类似QQ好友分组排序）
1,简介为了最佳体验,一个拖拽行排序的功能研究了几个小时.效果参考的QQ好友分组的排序. 网上查了下好像没有人发布QT版类似的代码,于是自己动手 QQ好友分组排序效果: 2,效果这是最终效果图,有 ...
jQuery实现防QQ列表好友分组
1)在显示当前div之前, 先隐藏其他div 2)交替切换被选元素的隐藏和显示效果如下: 主要方式是通过jQuery查找点击的标签所属的tr,再找其同级元素,再查找div,并进行隐藏,而点击的对象 ...
Android之实现QQ好友分组(ExpandableListView)
在项目开发中,也许我们遇到过ListView中嵌套ListView,但谷歌建议我们最好别这样做,因此他们写好了一个ExpandableListView类,他继承ListView,可以实现ListVie ...
Android中使用ExpandableListView实现好友分组
一个视图显示垂直滚动两级列表中的条目.这不同于列表视图,允许两个层次,类似于QQ的好友分组.要实现这个效果的整体思路为: 1.要给ExpandableListView 设置适配器,那么必须先设置数据源 ...

用Vue实现好友分组效果

用Vue实现好友分组效果相关推荐

最新文章

热门文章