tab栏切换-前端

vue场景
原理：通过类名操作元素显示与隐藏

  <div class="head">
      <ul>
          <li :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list" v-on:click="change(index)">{{item.title}}</li>
      </ul>
  </div>
    <div class="body">
        <img :class="currentIndex==index?'current':''" :key="item.id" :key="item.id" v-for="(item,index) in list" :src="item.path" alt="" class="one">
    </div>

var vm = new Vue({
    el:'#app',
    data:{
        currentIndex:'0',
        list:[{
            id:1,
            title:'one',
            path:'images/main.png'
        },
        {
            id:2,
            title:'two',
            path:'images/quan.png'
        },
        {
            id:3,
            title:'three',
            path:'images/account.png'
        },]
    },
    methods:{
        change:function (index) {
            this.currentIndex = index  //核心步骤
        }
    }
})