body部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
li{
list-style: none;
}
#app{
width:500px;
margin:100px auto;
}
.list{
overflow: hidden;
width:450px;
}
.list>li{
float: left;
width:150px;
text-align: center;
border:1px solid #000;
}
.cont>li{
width:450px;
height:150px;
line-height: 150px;
border:1px solid #000;
text-align: center;
}
</style>
</head>
<body>
<div id='app'>
<ul class='list'>
<li v-for="(value,index) in tab" @click="chg(index)">{{value.title}}</li>
</ul>
<ul class='cont'>
<li v-for="(value,index) in tab" v-show="value.flag">{{value.content}}</li>
</ul>
</div>
js部分：
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
tab:[
{title:'选项卡1',content:'11111111111111',flag:true},
{title:'选项卡2',content:'22222222222222',flag:false},
{title:'选项卡3',content:'33333333333333',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.tab.length;i++){
this.tab[i].flag=false;
}
this.tab[ind].flag=true;
}
}
})
</script>
</body>
</html>
网友评论