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>