vue实现tab切换

 这是基于vue-cli实现的

 利用v-for循环遍历tabItems，class绑定到当前点击的tab项，<router-link :to=item.tab>{{item.name}}</router-link>表示点击之后要跳转的路径（相当于每个tab项对应的div内容），<router-view></router-view>表示内容展示的地方

  <div id="navbar">
         <img class="logoImg" src="@/assets/images/logo.png">
         <ul class="nav navbar-nav">
           <li v-for="(item,index) in tabItems"  :class="{active:isCurrent==index}" @click="isCurrent = index" ><router-link :to=item.tab>{{item.name}}</router-link></li>
          </ul>
    </div>
    <div class="container">
      <div class="mianBody">
          <router-view></router-view>
      </div>
    </div>

 data() {
      return {
        tabItems:[{tab:'funcIndex',name:'首页'},{tab:'phoneList',name:'通讯录'},{tab:'vWatchNet',name:'微官网管理'},{tab:'',name:'公众号管理'}]
      }
    },

tab项点击之后的样式： 

.active {
    color:red
}