<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab</title>
</head>
<body>
<div id="app">
<div class="left">
<ul>
<li v-for="(item,index) in list" v-on:click="change(index)">{{item}}</li>
</ul>
</div>
<div class="top">
<ul v-show="show1">
<li v-for="(text,index) in list2"><a href="javascript:;" @click='tabToggle(text);'>{{text}}</a></li>
</ul>
<ul v-show="show2">
<li v-for="(text,index) in list3"><a href="javascript:;" @click='tabToggle(text);'>{{text}}</a></li>
</ul>
</div>
<div class="bottom">
{{texts}}
</div>
</div>
<script type="text/javascript" src='js/vue.js'></script>
<script>
var list=['男装','女装']
var list2=['西装','领带','剃须刀']
var list3=['内衣','上衣','化妆品']
var texts=""
var app = new Vue({
el: '#app',
data: {
currentView: 'tab01',
texts:texts,
list:list,
list2:list2,
list3:list3,
show1:true,
show2:false
},
methods: {
tabToggle: function(tabText) {
this.texts=tabText
// console.log(tabText);
},
change(index){
if(index==0){
this.show1=true
this.show2=false
}
if(index==1){
this.show1=false
this.show2=true
}
}
}
})
</script>
</body>
<style type="text/css">
* {
padding: 0;
margin: 0
}
#app {
width: 500px;
height: 300px;
margin: 0 auto;
background-color: #54b228;
}
ul{
list-style: none;
}
.left {
float: left;
height: 100%;
width: 20%;
background: #9a3;
text-align: center;
}
.left ul li{
margin: 0;
width: 100%;
height: 30px;
line-height: 30px;
border: none;
background: #527db5;
cursor: pointer;
color: #fff;
}
.left ul li:hover{
background: #89F572;
}
.top {
height: 50px;
line-height: 50px;
width: 100%;
background-color: #904229;
}
.top ul li{
display: inline-block;
margin: 0 10px;
}
.top ul li a {
text-decoration: none;
color: #fff;
}
.top ul li a:hover {
text-decoration: none;
color: #89f572;
}
.bottom {}
</style>
</html>
效果如图
浙公网安备 33010602011771号