<template> <div> <div> <div> <tab ref="tab" :list="['一级合伙人'+count,'二级合伙人']" @change="tabchange" /> </div> <div> <template v-if="list!=null&&tab==0"> <h4 >一级合伙人总数{{count}}人</h4> <ul> <li v-for="item in list"> <img v-bind:src="item.head_url" /> <div> {{item.vname}} <p>{{item.identity}}</p> </div> </li> </ul> </template> <template v-if="list!=null&&tab==1"> <h4 >二级合伙人总数{{count}}人</h4> <ul> <li v-for="item,index in list"> <div v-cloak> {{type(index)}}人数<p>{{item}}</p> </div> </li> </ul> </template> <!--<template v-if="list==null"> <div> <span></span> </div> </template>--> <template v-if="list==[]"> <div>暂无下线</div> </template> </div> </div> </div> </template> <style scoped=""> p{color:#807E7E} .circle{margin-top:0px} .mypage{height:100%;} .mui-table-view .mui-media-object { line-height: 45px; max-width: 45px; height: 45px; } </style> <script> import tab from "../public/tab" import pull from "../public/pull" export default { mounted() { this.changemes(); }, components: {tab,pull}, data() { return { tab:0, count:0, list: [] } }, computed:{ cmd:function(){ switch(this.tab){ case 0: return "Member/oneLevel"; case 1: return "Member/twoLevel"; } } }, methods: { type(num){ switch (~~num) { case 1: return "游客"; case 2: return "用户"; case 3: return "粉丝"; case 4: return "美人"; case 5: return "卖手"; case 6: return "合伙人"; case 7: return "加盟商"; } return "未知"; }, tabchange({index, data}) { this.tab = index; }, changemes(){ this.list=null; this.$api(this.cmd).then(list => { this.count=list.count; this.list=list.list; }); } }, watch:{ tab:function(){ this.changemes(); } } } </script>
以上这篇vue刷新和tab切换实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: