vue仿淘宝订单状态的tab切换效果

<div class="navigation">
 //这里是通过循环遍历出来的数据，你需要根据index的值来判断你现在点击的是第几个tab栏导航，同时在js中写一个navchange的方法来把index 传递到就js中来改变tabindex(这是在初始化时设置的默认index)的值
  <span v-for="(item, index) in navitems" v-touch:tap=" { event: navchange, params: [index] }">
   <em> {{item.text}} </em>   
  </span>
</div>
 //上面的v-touch:tap 是我们自己封装的点击事件指令，跟v-click用法差不多

<div class="content">
 <div class="main">
  //div item中是需要切换的订单数据，for循环遍历的是各种订单状态的集合orderallitem，然后通过选择的tab值对应的index来判断调用orderallitem中的第几个数组进行循环遍历
  <div class="item" v-for="item in orderallitem[tabindex]">
    <div class="title">
     <span class="id">订单号：{{item.orderid}}</span>
     <span class="status" >{{item.statusname}}</span>
    </div>
    <div class="toys" v-touch:tap="{ event: gotodetail, params: [item.orderid]}">
     <div class="toy" v-for="toy in item.toys">
      <img class="toyimg" :src="toy.image"/>
      <div class="area">
       <em class="name">{{toy.toyname}}</em>
       <span class="age">适合年龄：{{toy.agerange}}</span
      </div>
     </div>
    </div>
   </div>
  </div>
</div>

var _default = (function(){
 var navs = [
  {
   'text': '全部订单', 
  },
  {
   'text': '待付款',
  },
  {
   'text': '待收货',
  },   
  {
   'text': '待归还',
  },
  {
   'text': '已完成',
  }
 ];
 var orders= [
  //因为没有合适的数据来源，所以假装这里就是从后端请求的所有的订单集合，在下边data中你需要吧你分类的订单根据状态进行分类。
 ];
 return {
  name: 'index',
  mounted: function(){

  },
  destoryed: function(){

  },
  data: function(){
   //待付款
   var paymentsitem = [];
   //待收货
   var receiptsitem = [];
   //待归还
   var returnsitem = [];
   //已完成
   var completesitem = [];

   //把所有不同状态的订单通过if判断push到相对应的订单状态集合中。
   orders.foreach(function(order){
    if(order.status == 0){
     paymentsitem.push(order);
    };
    if(order.status == 3){
     receiptsitem.push(order);
    };
    if(order.status == 5){
     returnsitem.push(order);
    };
    if(order.status == 13){
     completesitem.push(order);
    }
   });
   //设置一个空数组，把所有状态下的订单集合放到空数组中，从0-5的顺序按照你的自己设置的tab切换的内容0-5的顺序对应排列，
   var orderall = [ orders, paymentsitem, receiptsitem, returnsitem, completesitem];
   console.log(orderall);
   return {
    navitems : navs,
    //全部订单分类的集合
    orderallitem : orderall,
    //设置
    tabindex : 0,
   };
  },
  methods: {
   navchange: function (e, index){

    this.tabindex = index;
//    console.log(this.tabindex)
   }
  }
 }
})();

export default _default;