实现效果
- html
<div id="aaa">
<ul class="list">
<li v-on:click="dianji(i)" v-bind:style="{color:i==index?'#f00':''}" v-for="item,i in dataList" v-text="item.title"></li>
</ul>
<div class="content">
<ul v-bind:style="{display:i==index?'block':'none'}" v-for="item,i in dataList">
<li v-for="opt in item.list" v-text="opt.aa"></li>
</ul>
</div>
</div>
- css
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#aaa {
width: 302px;
margin: 100px auto 0;
}
.list {
overflow: hidden;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.list li {
float: left;
width: 99px;
height: 40px;
line-height: 40px;
text-align: center;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.content {
width: 299px;
height: 200px;
border: 1px solid #000;
border-top: 0 none;
}
.content ul{
display: none;
}
</style>
- js
var vm = new Vue({
el: '#aaa',
data: {
dataList,
index: 0
},
methods: {
dianji(i) {
this.index = i;
}
}
});
- 数据
var dataList = [{
title: "新闻",
list: [{
aa: "新闻111"
},
{
aa: "新闻222"
},
{
aa: "新闻333"
}
]
},
{
title: "体育",
list: [{
aa: "体育111"
}, {
aa: "体育222"
}, {
aa: "体育333"
}]
},
{
title: "娱乐",
list: [{
aa: "娱乐111"
}, {
aa: "娱乐222"
}, {
aa: "娱乐333"
}]
}
];