|
前几天刚开始使用vue 做项目，然后自己就在项目中摸索写了一个tab切换的小dome，仿淘宝订单状态的tab切换。
HTML 代码：
{{item.text}}
//上面的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}}
{{item.statusName}}
JS代码
},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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
