<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.red{
background: red;
}
#app div{
display: none;
}
</style>
</head>
<body>
<div id="app">
<input
v-for="item,i in tabData"
type="button"
v-bind:value="item.title"
v-bind:class="{red:i===index}"
v-on:click="tabHandle(i)"
/>
<div
v-bind:style="{display:j===index?'block':'none'}"
v-for="item,j in tabData"
>
<p v-for="option in item.list">
{{option.subTitle}}
</p>
</div>
</div>
</body>
<script type="text/javascript">
let tabData=[
{
title:'新闻',
list:[
{
subTitle:"今天很好"
},
{
subTitle:"今天很好"
},
{
subTitle:"今天很好"
},
]
},
{
title:'娱乐',
list:[
{
subTitle:"出轨了"
},
{
subTitle:"结婚了"
},
]
},
{
title:'体育',
list:[
{
subTitle:"冠军"
},
{
subTitle:"冠军"
},
]
},
]
let vm=new Vue({
el:"#app",
data:{
tabData,
index:0,
},
methods:{
tabHandle(i){
this.index=i
}
}
})
</script>
</html>
