vue tab切换 （动态数据切换）

前几天刚开始使用vue 做项目，然后自己就在项目中摸索写了一个tab切换的小dome，仿淘宝订单状态的tab切换。

HTML 代码：

<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>

JS代码

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;