Vue底部导航icon图标或图标切换功能实现

功能需求：底部导航切换页面，同时切换图片。底部为公共组件

   通过click点击事件获取下标来进行类名动态切换图标。这里之所以使用v-show，因为底部导航要进行频繁的切换。

<template>
  <footer class="footer">
    <ul>
      <li
        v-for="(item, index) of list"
        :key="index"
        :class="{active:index == num}"
        @click="addClassName(index)"
      >
        <router-link :to="item.path">
        //图片也是一样的道理，把span标签换成img即可。
          <span v-show="num!=index" :class="item.icon"></span>
          <span v-show="num==index" :class="item.active"></span>
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: "iconfont icon-wode",  //原始显示的图标
          active: "iconfont icon-shouye", //点击之后要显示的图标
          name: "首页",
          path: "/home"
        },
        {
          icon: "iconfont icon-icon",
          active: "iconfont icon-gouwuche",
          name: "分类",
          path: "/kind"
        },
        {
          icon: "iconfont icon-gouwuche",
          active: "iconfont icon-icon",
          name: "购物车",
          path: "/cart"
        },
        {
          icon: "iconfont icon-wode",
          active: "iconfont icon-shouye",
          name: "我的",
          path: "/user"
        }
      ],
      num: 0,
      tabName: ""
    };
  },
  mounted() {
  },
  methods: {
    addClassName: function(index) {
      console.log(index);
      this.num = index;
    }
  }
};
</script>