vue 点击切换变色 tab 改变class 跳转链接

vue 点击切换变色 tab 改变class

1.

 <section id='foot_guide'>    <div v-for="(item,index) in footlist" :key="index" @click="gotoAddress({path:item.path},index)" class="guide_item" :class="{active: activeIndex == index}">      <svg class="icon" aria-hidden="true">        <use v-bind:xlink:href="item.svg"></use>      </svg>      <div>{{item.name}}</div>    </div>  </section>

2.

  data(){      return {        footlist: [          {            name: '首页',            path: '/msite',            svg: '#icon-shouye2'          },          {            name: '个人中心',            path: '/profile',            svg: '#icon-user'          }        ],        activeIndex: 0,      }    }, methods: {      gotoAddress(path, index){        this.$router.push(path);        this.activeIndex = index      }    },

3.

  .active div {    color: #FFBC00;  }  .active svg use {    fill: #FFBC00;  }