功能需求：底部导航切换页面，同时切换图片。底部为公共组件
通过click点击事件获取下标来进行类名动态切换图标。这里之所以使用v-show，因为底部导航要进行频繁的切换。
<template><footer class="footer"><ul><liv-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>
