用到的相关属性
v-for, :class="{current:num==index},v-show="num==index",@click="change(index)"
代码如下;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
overflow: hidden;
}
ul>li{
float: left;
margin:4px 20px;
cursor: pointer;
}
.current{
color:#f60;
border-bottom: 1px solid #f60;
}
section>div{
width: 400px;
height: 40px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in listTop" :class="{current:num==index}" @click="change(index)">{{item}}{{index}}</li>
</ul>
<section>
<div v-for="(item,index) in listCon" v-show="num==index">{{item}}</div>
</section>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:0,
listTop:['公告','规则','论坛','安全','公益'],
listCon:['公告内容','规则内容','论坛内容','安全内容','公益内容']
},
methods:{
change(a){
this.num=a;
}
}
})
</script>
</body>
</html>