Vue中怎么实现一个底部导航栏组件

今天就跟大家聊聊有关Vue中怎么实现一个底部导航栏组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

<template>	<div class="footer">	<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)">	<img :src="index===idx?item.iconSelect:item.icon">	<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>	</div>  	</div> </template>   <script type="text/javascript">	export default{	props:['idx'],	data(){	return {	items:[{	cls:"home",	name:"首页",	push:"/home",	icon:"../static/home.png",	iconSelect:"../static/home_select.png"	},	{	cls:"shares",	name:"股票",	push:"/shares",	icon:"../static/home.png",	iconSelect:"../static/home_select.png"	},	{	cla:"community",	name:"社区",	push:"/community",	icon:"../static/home.png",	iconSelect:"../static/home_select.png"	},	{	cla:"mine",	name:"我的",	push:"/mine",	icon:"../static/home.png",	iconSelect:"../static/home_select.png"	}]	}	}	}    </script>

:src="index===idx?item.iconSelect:item.icon" 通过代码判断是否是当前页面，选择不通的图片

@click="$router.push(item.push) 跳转到各个页面

Style:

.footer{	display: flex;	position: absolute;	left: 0;	bottom: 0;	box-sizing: border-box;	height: 6rem;	background: #909090;	width: 100%;}	div{	flex: 1;	font-size: 30px;	}	div img{	width: 30px;	height: 30px;	}	div p{	color:black;	}	.on{	color: red;	}

使用方式：

导入：

<BNai :idx="0">	  </BNai>

以上所述是小编给大家介绍的Vue底部导航栏详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也

看完上述内容，你们对Vue中怎么实现一个底部导航栏组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。