<!-- 首页页面 -->
<div id="app">
<div id="container">
<Shouye index="0"></Shouye>
</div>
</div>
<script>
import Shouye from '/导航组件.html'
var testVue = new Vue({
el:'#app',
data(){
return {
tabActive:0,
}
},
components:{
Shouye
},
methods : {
},
});
</script>
<style >
body{
padding:0;margin:0;
width:100%;
list-style: none;
text-decoration: none;
margin:0;
}
ul{
margin:0;
padding: 0;
}
p{
margin:0 0;
}
#container{
width:100%;
height:100%;
}
#container .contHead{
width:100%;
overflow: hidden;
}
#container .contHead .li{
width:25%;
height:40px;
float: left;
list-style: none;
line-height:40px;
text-align: center;
display: block;
}
#container .contHead .show{
border-bottom: 2px solid #30BEC1;
}
</style>
<!-- 导航组件 -->
<div id="app">
<div id="container">
<div class="contHead">
<ul>
<router-link class="li" :class="{show:tabActive[0]}" :to="{path:'/首页.html'}">首页</router-link>
<router-link class="li" :class="{show:tabActive[1]}" >冬装</router-link>
<router-link class="li" :class="{show:tabActive[2]}">男装</router-link>
<router-link class="li" :class="{show:tabActive[3]}">女装</router-link>
</ul>
</div>
</div>
</div>
<script>
var testVue = new Vue({
el:'#app',
props:[
index:0
],
data(){
return {
tabActive:[false,false,false,false]
}
},
methods : {
tab(index){
for(var i=0;i<this.tabActive.length;i++){
if(i==index){
this.tabActive[i] = true
}else{
this.tabActive[i] = false
}
}
},
},
created() {
this.tab(this.index)
}
});
</script>
<style >
body{
padding:0;margin:0;
width:100%;
list-style: none;
text-decoration: none;
margin:0;
}
ul{
margin:0;
padding: 0;
}
p{
margin:0 0;
}
#container{
width:100%;
height:100%;
}
#container .contHead{
width:100%;
overflow: hidden;
}
#container .contHead .li{
width:25%;
height:40px;
float: left;
list-style: none;
line-height:40px;
text-align: center;
display: block;
}
#container .contHead .show{
border-bottom: 2px solid #30BEC1;
}
</style>