<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
ul{
padding: 0;
margin: 0;
list-style: none;
}
.wrap{
384px;
height: 707px;
background: url();
margin: 0 auto;
position: relative;
}
.list{
280px;
position: absolute;
left: 46px;
top: 64px;
}
.list h2{
height: 48px;
font: 14px/48px arial;
color: #fff;
background: rgba(0,0,0,0.8);
box-sizing: border-box;
padding-left: 10px;
}
.list h2:nth-of-type(1){
margin: 0;
}
.list h2.active{
background: rgba(221,84,111,0.8);
}
.list span{
0;
height: 0;
display: inline-block;
border: 6px dashed rgba(0,0,0,0);
border-left: 6px solid rgba(255,255,255,1);
margin-right: 10px;
position: relative;
top: 1px;
}
.list span.active{
0;
height: 0;
display: inline-block;
border: 6px dashed rgba(0,0,0,0);
border-left: 6px solid rgba(255,255,255,1);
margin-right: 10px;
position: relative;
top: 4px;
}
.list ul{
background: #000;
color: #fff;
display: none;
}
.list li{
height: 40px;
font:14px/40px "微软雅黑";
box-sizing: border-box;
padding-left: 34px;
}
.list .item{
margin: 10px 0;
}
.list .active h2{
background: rgba(221,84,111,.8);
}
.list .active ul{
display: block;
}
</style>
<script>
var qqData=[
{
title:'我的好友',
list:[
{
subTitle:'张国荣'
},
{
subTitle:'周杰伦'
},
{
subTitle:'王杰'
}
]
},{
title:'我的同事',
list:[
{
subTitle:'莫莫'
},
{
subTitle:'多多'
},
{
subTitle:'leo'
}
]
}
]
</script>
</head>
<body>
<div class="wrap" id="app">
<div class="list">
<div
class="item"
v-for="item,index in qqData"
:class="{active:index===currentIndex}"
>
<h2 @click="tab(index)"><span></span>{{item.title}}</h2>
<ul>
<li v-for="option in item.list">{{option.subTitle}}</li>
</ul>
</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
qqData:qqData,
currentIndex:''
},
methods:{
tab(index){
this.currentIndex=this.currentIndex===index?'':index;
}
}
})
</script>
</body>
</html>
