vue刷新和tab切换实例

分类：Vue作者：编程之家用户

首先写个子组件用来放刷新的内容，命名为pull（可以看例子最后面放的。）

然后再要刷新的页面引用

价格 //点击价格会排序
<pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">

<div class="mui-row mui-col-xs-12 mui-clearfix"&gt;
  <span class="mui-col-xs-6" v-href="{name:'商品详情'}" rel="external nofollow" v-for="item in list"&gt;
   <div class="img"&gt;<img v-bind:src="item.goods_image"/&gt;</div>
   <h4>{{item.goods_name}}</h4>
   <p class="red1"&gt;￥{{item.goods_price}}</p>
  </span>
 </div>

下面是命名为pull的子组件。

暂无内容

tab的一个例子

<div class="fbjbox">
<div class="fbjbox1">
<tab ref="tab" :list="['一级合伙人'+count,'二级合伙人']" width="50%" @change="tabchange" />

一级合伙人总数{{count}}人
    {{item.identity}}

     </ul> 

</template>
<template v-if="list!=null&&tab==1"&gt;     
 <h4 >二级合伙人总数{{count}}人</h4>
  <ul class="mui-table-view clear"&gt;
   <li class="mui-table-view-cell mui-media" v-for="item,index in list"&gt;
     <div class="mui-media-body" v-cloak>
      {{type(index)}}人数<p class="mui-pull-right"&gt;{{item}}</p>
     </div>
   </li>

  </ul> 
</template>
<!--<template v-if="list==null"&gt;
 <div class=" mui-text-center" style="padding: 50px;"&gt;

 <span class="mui-spinner"&gt;</span>
 </div>
</template>-->
<template v-if="list==[]"&gt;
 <div>暂无下线</div>
</template>