vue插件集合9：vue的tab切换 以及底部栏

vue中的tab切换直接上代码，

第一种

		<div class="tabNav flexbox">
			<van-col span="12" :class="{'selected':tab === 0,'testTitle':true}">
				<div @click="toTab(0)">
					
					量化明细
				</div>
			</van-col>
			<van-col span="12" :class="{'selected':tab === 1,'testTitle':true}">
				<div @click="toTab(1)">
					增值
				</div>
			</van-col>
		</div>
		<!-- 内容部分 -->
		<div>
			<div v-if="tab === 0">
				1
			</div>
			<div v-else-if="tab === 1">
				2
			</div>
		</div>
		export default {
		data() {
			return {
				tab:0
			}
		},
		methods: {
			toTab(type){
				this.tab = type;
			}
		},
	}

第二种

<template>
	<div>
		<div id="app">
			<ul>
				<li><span v-bind:class="{current: num == 1}" v-on:click="change(1)">电影</span></li>
				<li><span v-bind:class="{current: num==2}" v-on:click="change(2)">动漫</span></li>
			</ul>
			<div class="content">
				<transition name="fade">
					<div v-show="num == 1">1</div>
				</transition>
				<transition name="move">
					<div v-show="num == 2">2</div>
				</transition>
				<transition name="fade">
					<div v-show="num == 3">3</div>
				</transition>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return{
					num: 1,
			}
		},
		methods: {
			change: function(index) {
				this.num = index
			}
		}


	}
</script>

第三种

<template>
	<div class="login">
		<!-- 底部导航部分 -->
		<div id="TabBar" class="tab-bar row">
			<div class="cell-3 tab-bar-item" @click="goPage(0)" v-bind:class="{active: actives[0]}">
				<div class="row">
					<i class="iconfont icon-shouye"></i>
				</div>
				<div class="row">
					<span>首页</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(1)" v-bind:class="{active: actives[1]}">
				<div class="row">
					<i class="iconfont icon-dengpao"></i>
				</div>
				<div class="row">
					<span>我的社区</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(2)" v-bind:class="{active: actives[2]}">
				<div class="row">
					<i class="iconfont icon-shangcheng navys"></i>
				</div>
				<div class="row navys">
					<span>商城</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(3)" v-bind:class="{active: actives[3]}">
				<div class="row">
					<i class="iconfont icon-my_icon"></i>
				</div>
				<div class="row">
					<span>我</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				actives: [true, false, false, false],
			}
		},
		mounted() {},
		methods: {
			// tab
			goPage: function(tag) {
				if (tag === 0) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[0] = true;
					this.$router.push("/")
				} else if (tag === 1) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[1] = true;
					if (this.isLogin) {
						this.$router.push("/myCommunity")
					} else {
						this.$toast("请先登录");
						this.$router.push("/login")
					}
				} else if (tag === 2) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[2] = true;
					this.$dialog.alert({
						message: '暂无开放'
					}).then(() => {
						this.goPage(0)
					});
				} else if (tag === 3) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[3] = true;
					if (this.isLogin) {
						if (this.isActive) {
							this.$router.push("/myactiva")
						} else {
							this.$router.push("/my")
						}
					} else {
						this.$toast("请先登录");
						this.$router.push("/login")
					}
				}
				this.$emit('select-item', tag);
			}
		}
	}
</script>
<style scoped>
	/* 底部导航栏 */
	.navys {
		color: #a4a4a4 !important;
	}
	.tab-bar {
		box-shadow: 0 -4px 16px -1px #ebebeb;
		color: #a4a4a4;
		background-color: white;
		height: 1.05rem;
		border: 0 solid rgb(210, 210, 210);
		border-top-width: 0px;
		position: fixed;
		margin: auto;
		bottom: 0;
		width: 100%;

	}

	.tab-bar .cell-3 {
		display: inline-block;
		width: 24%;
		text-align: center;
		padding-top: 0.15rem;
	}

	.tab-bar-item {
		height: 1.05rem;
	}

	.tab-bar .active {
		color: #0a0c56;
	}

	.tab-bar i {
		font-size: 21px;
		padding-bottom: 0.03rem;
		display: inline-block;
		font-weight: 700;
	}
</style>