<div class="navigation">
 //這里是通過循環(huán)遍歷出來的數(shù)據(jù)，你需要根據(jù)index的值來判斷你現(xiàn)在點(diǎn)擊的是第幾個(gè)tab欄導(dǎo)航，同時(shí)在js中寫一個(gè)navChange的方法來把index 傳遞到就js中來改變tabIndex(這是在初始化時(shí)設(shè)置的默認(rèn)index)的值
 <span v-for="(item, index) in navItems" v-touch:tap=" { event: navChange, params: [index] }">
  <em> {{item.text}} </em>  
 </span>
</div>
 //上面的v-touch:tap 是我們自己封裝的點(diǎn)擊事件指令，跟v-click用法差不多

<div class="content">
 <div class="main">
 //div item中是需要切換的訂單數(shù)據(jù)，for循環(huán)遍歷的是各種訂單狀態(tài)的集合orderAllItem，然后通過選擇的tab值對(duì)應(yīng)的index來判斷調(diào)用orderAllItem中的第幾個(gè)數(shù)組進(jìn)行循環(huán)遍歷
 <div class="item" v-for="item in orderAllItem[tabIndex]">
  <div class="title">
   <span class="id">訂單號(hào)：{{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= [
 //因?yàn)闆]有合適的數(shù)據(jù)來源，所以假裝這里就是從后端請(qǐng)求的所有的訂單集合，在下邊data中你需要吧你分類的訂單根據(jù)狀態(tài)進(jìn)行分類。
 ];
 return {
 name: 'index',
 mounted: function(){

 },
 destoryed: function(){

 },
 data: function(){
  //待付款
  var paymentsItem = [];
  //待收貨
  var receiptsItem = [];
  //待歸還
  var returnsItem = [];
  //已完成
  var completesItem = [];

  //把所有不同狀態(tài)的訂單通過if判斷push到相對(duì)應(yīng)的訂單狀態(tài)集合中。
  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);
  }
  });
  //設(shè)置一個(gè)空數(shù)組，把所有狀態(tài)下的訂單集合放到空數(shù)組中，從0-5的順序按照你的自己設(shè)置的tab切換的內(nèi)容0-5的順序?qū)?yīng)排列，
  var orderAll = [ orders, paymentsItem, receiptsItem, returnsItem, completesItem];
  console.log(orderAll);
  return {
  navItems : navs,
  //全部訂單分類的集合
  orderAllItem : orderAll,
  //設(shè)置
  tabIndex : 0,
  };
 },
 methods: {
  navChange: function (e, index){

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

export default _default;