Vue@2.X --- 实现一个简单的tab栏点击切换（选项卡）

基于前面的指令部分的知识点，我们可以做一个简单的选项卡功能

好啦，话不多说，直接上代码：

我们需要在模板中创建一个tab栏的基本结构

  <ul class="tab">
    <li class="tab-item"></li>
  </ul>

还有样式代码：

.tab {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  height: 80px;
  border-top: 1px solid teal;
  display: flex;
  padding: 0;
  color: #999;
  &-item {
    list-style: none;
    flex: 1;
    text-align: center;
    justify-content: center;
    line-height: 80px;
    &__active {
      color: orange;
    }
  }
}

上面的__active样式就是当我们点击该元素时需要添加的切换样式

当然，我们需要在vue实例中定义一个数组，里面是tab栏每一项的元素，还需定义变量保存当前点击的是哪一个选项卡，默认情况是第0项index:0

import './index.scss';
import temp from './index.template';
export default {
  el: '#app',
  template: temp,
  data() {
    return {
      index: 0,
      menuList: ['首页', '分类', '购物车', '我的'],
    };
  },

接下来，将数据渲染到视图，并绑定key值

  <ul class="tab">
    <li class="tab-item" v-for='(item,key) in menuList' :key='item'>{{item}}</li>
  </ul>

其实，实现该效果的核心逻辑就是，利用v-for循环添加元素后，点击谁切换谁，就把index值设成哪个key ，通过点击事件将key值赋给index，并且动态绑定style 利用三目运算，判断当前点击元素是否就是循环中绑定的key值，如果是，就定义颜色orange，不是即默认灰色,

那么：

  <ul class="tab">
    <li class="tab-item" v-for='(item,key) in menuList' :key='item' @click='toggle(key)' :style='{color:index === key ? 'orange' : '#999'}'>{{item}}</li>
  </ul>

import './index.scss';
import temp from './index.template';
export default {
  el: '#app',
  template: temp,
  data() {
    return {
      index: 0,
      menuList: ['首页', '分类', '购物车', '我的'],
  };
  methods:{
     toggle(i){
         this.index = i
     }
  }
},

其实，我们已经学过了动态绑定class，那么我们完全可以利用这点，修改我们的选项卡，让其更有格调，哈哈哈哈

  <ul class="tab">
    <li class="tab-item" v-for='(item,key) in menuList' :key='item' @click='toggle(key)' :class="{'tab-item__active': index === key}">{{item}}</li>
  </ul>