实现手机App底部导航栏，图片+文字

看了王先生的博客：https://blog.csdn.net/wang1006008051/article/details/78040862 

我自己动手操作了一下，自己做的并且运行起来还是和别人的有很大区别，不多效果都是差不多的

这个例子我分成了三部分：template、script、style

template：

<template>
  <div class="footer">
    <ul style="display: flex;list-style: none">
      <li style="flex: 1" v-for="item in list" @click="selectlist(item.title)">
        <img :src="isSelect === item.title ? item.url1 : item.url">
        <p>{{item.title}}</p>
      </li>
    </ul>
  </div>
</template>

script：

<script>
export default {
  name:'Map',
  data() {
    return{
      isSelect:'银行',
      list:[
        {title:'银行',url:require('@/assets/map/bank2.png'),url1:require('@/assets/map/bank1.png')},
        {title:'公交',url:require('@/assets/map/bus2.png'),url1:''},
        {title:'地铁',url:require('@/assets/map/subway2.png'),url1:''},
        {title:'教育',url:require('@/assets/map/education2.png'),url1:''},
        {title:'医院',url:require('@/assets/map/hospital2.png'),url1:''},
        {title:'休闲',url:require('@/assets/map/arder2.png'),url1:''},
        {title:'购物',url:require('@/assets/map/shopping2.png'),url1:require('@/assets/map/shopping1.png')}
      ]
    }
  },
  methods:{
    selectlist(title){
      this.isSelect = title
    }
  }
}
</script>

                                                                                                       style：

<style>
  .footer{
    margin-left: 25%;
    width: 50%;
    height: 50px;
    background-color: #e1faff;
  }
  img{
    width: 20px;
    height: 20px;
    margin-top: 6px;
  }
  p {
    font-size: 3px;
    height: 15px;
    line-height: 10px;
  }
</style>

效果图如下：