前幾天剛開始使用vue 做項目，然后自己就在項目中摸索寫了一個tab切換的小dome，仿淘寶訂單狀態(tài)的tab切換。

HTML 代碼：

<div class="navigation"> //這里是通過循環(huán)遍歷出來的數(shù)據(jù)，你需要根據(jù)index的值來判斷你現(xiàn)在點擊的是第幾個tab欄導(dǎo)航，同時在js中寫一個navChange的方法來把index 傳遞到就js中來改變tabIndex(這是在初始化時設(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 是我們自己封裝的點擊事件指令，跟v-click用法差不多<div class="content"> <div class="main">  //div item中是需要切換的訂單數(shù)據(jù)，for循環(huán)遍歷的是各種訂單狀態(tài)的集合orderAllItem，然后通過選擇的tab值對應(yīng)的index來判斷調(diào)用orderAllItem中的第幾個數(shù)組進行循環(huán)遍歷  <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>

JS代碼

var _default = (function(){ var navs = [  {   'text': '全部訂單',   },  {   'text': '待付款',  },  {   'text': '待收貨',  },     {   'text': '待歸還',  },  {   'text': '已完成',  } ]; var orders= [  //因為沒有合適的數(shù)據(jù)來源，所以假裝這里就是從后端請求的所有的訂單集合，在下邊data中你需要吧你分類的訂單根據(jù)狀態(tài)進行分類。 ]; return {  name: 'index',  mounted: function(){  },  destoryed: function(){  },  data: function(){   //待付款   var paymentsItem = [];   //待收貨   var receiptsItem = [];   //待歸還   var returnsItem = [];   //已完成   var completesItem = [];   //把所有不同狀態(tài)的訂單通過if判斷push到相對應(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è)置一個空數(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;