js代码
var vm = new Vue({
el: '#app',
data: {
curIndex: 0,
list: [
{
title: '精华',
contList:[
{ id: 1, cont: '精华数据1'},
{ id: 2, cont: '精华数据2'},
{ id: 3, cont: '精华数据3'}
]
},
{
title: '分享',
contList:[
{ id: 1, cont: '分享数据1'},
{ id: 2, cont: '分享数据2'},
{ id: 3, cont: '分享数据3'}
]
},
{
title: '问答',
contList:[
{ id: 1, cont: '问答数据1'},
{ id: 2, cont: '问答数据2'},
{ id: 3, cont: '问答数据3'}
]
}
]
},
methods: {
toggle(index){
this.curIndex = index;
}
}
});
模板
<div id="app">
<div class="tab">
<ul class="title">
<li
v-for="(item,index) in list"
:class="curIndex === index ? 'active':''"
@click="toggle(index)"
>{{item.title}}------{{index}}</li>
</ul>
<div class="cont">
<ul v-for="(item,index) in list" :class="curIndex === index ? 'active':''">
<li v-for="(smallItem,idx) in item.contList">{{smallItem.cont}}</li>
</ul>
</div>
</div>
</div>
样式
<style>
ul,li {
list-style: none;
}
.tab {
width: 600px;
border: 1px solid #000;
}
.tab>ul {
display: flex;
justify-content: space-between;
}
.tab .title .active {
color: red;
}
.tab .cont ul {
display: none;
}
.tab .cont ul.active {
display: block;
}
</style>