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

 <div class="navigation"> //这里是通过循环遍历出来的数据，你需要根据index的值来判断你现在点击的是第几个tab栏导航，同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span> <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"> <div class="title"> <span class="id">订单号：{{item.orderId}}</span><span class="status">{{item.statusName}}</span></div><div class="toys"> <div class="toy"> <div class="area"> <em class="name">{{toy.toyName}}</em><span class="age">适合年龄：{{toy.ageRange}}</span></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;