自己写的vue底导航

<template>
<div id="app">
<div class="tabbar">
<div class="mytab" v-for="(tab, i) in tabs" @click="forChageTag(i)">
<router-link class="tab" :to="tab.turl">
<img class="icon" :src="tab.icon">
<p :class="{title:hastitle,active:tab.hasactive}">{{tab.title}}</p>
</router-link>
</div>
</div>
<router-view/>
</div>
</template>

<script>
export default {
name: 'App',
data () {
return {
activeTab: 0,
hastitle: true,
tabs: [{
title: '看点',
icon: '../../static/Image/ico_home_p.png',
icons: '../../static/Image/ico_home_p.png',
icon01: '../../static/Image/ico_home_n.png',
turl: '/kand',
hasactive: true
}, {
title: '视频',
icon: '../../static/Image/ico_video_n.png',
icons: '../../static/Image/ico_video_p.png',
icon01: '../../static/Image/ico_video_n.png',
turl: '/video',
hasactive: false
}, {
title: '任务中心',
icon: '../../static/Image/icon_red_.png',
icons: '../../static/Image/icon_red_.png',
icon01: '../../static/Image/icon_red_.png',
turl: '/task',
hasactive: false
}, {
title: '我的',
icon: '../../static/Image/ico_mine_n.png',
icons: '../../static/Image/ico_mine_p.png',
icon01: '../../static/Image/ico_mine_n.png',
turl: '/me',
hasactive: false
}]
}
},
methods:{
forChageTag (index){
console.log(this.tabs.length);
var tablen = this.tabs.length;
for(var n = 0;n < tablen; n++){
console.log(n)
console.log(index)
if(n == index){
this.tabs[index].icon = this.tabs[index].icons;
this.tabs[index].hasactive = true;
}else{
this.tabs[n].icon = this.tabs[n].icon01;
this.tabs[n].hasactive = false;
}
}
}
},
mounted: function(){
}
}

</script>

<style lang="stylus" scoped>
.tabbar
width:100%
display:flex
padding:20px 0
position:fixed
bottom:0
left:0
& > .mytab
flex:1
text-align:center
& > .tab > img
width:70px
height:70px
p.title
margin-top:15px
.active
color:#f00
</style>

 

组件切换和底导航切换，状态变化

转载于:https://www.cnblogs.com/wcn123456/p/9376420.html