vue实践——tab切换

原生js的tab切换思路是这样的：

1.先将导航栏循环，得到每个单独的导航栏项

2.将循环的导航栏项进行点击

3.再进行一步循环，其他兄弟元素隐藏，拥有当前index值显示出来，当前类名改变，其他的类名变回公共类名

原生js的tab切换基本就是两步循环，一次循环导航，一次循环内容，两步嵌套实现切换

jquery的tab切换思路和原生完全一样。

进入正题~~~~

vue是MVVM框架，那我们操作mvvm的时候就尽量不要操作dom，而是进行数据的改变，从而实现切换，这也是vue的核心思想，双向数据绑定

先说一下vue的tab切换的思路：

1.我们现在data中定义两个变量，一个是控制状态的变量,我们起名叫active，active表示状态，初始化为0

二是导航栏的内容列表，我们起名叫list，list初始化可以是个数组或者json

2.我们要通过active的改变控制tab的切换

3.在导航状态中我们加入一个v-for循环，绑定一个class，点击的时候，给这个导航一个点击事件，

点击事件主要是改变active这个状态的改变

4.内容部分要通过v-if进行改变，每次判断active的状态，来进行改变内容

废话不多说，上代码

<!-- tab切换 -->
<template>
  <div class="main">
    <ul>
      <li
        v-for="(item,index) of list"
        :key="index"
        :class="{activeClass:active===index}"
        @click="()=>{active=index}"
      >{{item.name}}</li>
      <!-- <li :class="{activeClass:active===0}" @click="()=>{active=0}">aaa</li>
          <li :class="{activeClass:active===1}" @click="()=>{active=1}">bbb</li>
      <li :class="{activeClass:active===2}" @click="()=>{active=2}">ccc</li>-->
    </ul>
    <div class="content">
      <div v-if="active===0">aaa</div>
      <div v-if="active===1">bbb</div>
      <div v-if="active===2">ccc</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      active: 0,
      list: [
        { id: 1, name: "aaa" },
        { id: 2, name: "bbb" },
        { id: 3, name: "ccc" }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {},
  mounted() {}
};
</script>
<style scoped lang="less">
ul {
  width: 1002px;
  height: 60px;
  margin: 0 auto;
  background: #f2f7b6;
  li {
    float: left;
    width: 333px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    &.activeClass {
      background: #ecf39e;
    }
  }
  li + li {
    border-left: 1px solid #ccc;
  }
}
.content {
  width: 1002px;
  margin: 0 auto;
  div {
    height: 300px;
    text-align: center;
    line-height: 300px;
    background: #a8f5a5;
  }
}
</style>