如何用Vue代码实现一个底部导航栏组件

这篇文章主要讲解了“如何用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>