tab切换.

 <div class="state__wrapper">
        <div class="state__item--wrapper" @click="stateActive = 'ALL'">
          <span class="state__item" :class="{'state__item--active': stateActive === 'ALL'}">
            全部
          </span>
        </div>
        <div class="state__item--wrapper" @click="stateActive = 'FINISHED'">
          <span class="state__item" :class="{'state__item--active': stateActive === 'FINISHED'}">
            已完成
          </span>
        </div>
        <div class="state__item--wrapper" @click="stateActive = 'ADVANCE_FUND'">
          <span class="state__item" :class="{'state__item--active': stateActive === 'ADVANCE_FUND'}">
            垫资
          </span>
        </div>
        <div class="state__item--wrapper" @click="stateActive = 'NOT_FINISH'">
          <span class="state__item" :class="{'state__item--active': stateActive === 'NOT_FINISH'}">
            未完成
          </span>
        </div>
        <div class="state__item--wrapper" @click="stateActive = 'CANCELED'">
          <span class="state__item" :class="{'state__item--active': stateActive === 'CANCELED'}">
            已取消
          </span>
        </div>
    </div>

        <div class="order-item__box" v-if="stateActive === 'ADVANCE_FUND'">
              <span class="order__offer-message">
                {{ order.advanceFundMsg }} {{ order.confirmDeliveryTime || '' }}
              </span>
            </div>

在data里面去定义

data:{
    return {
        stateActive: 'ALL'
    }
}
watch:{
     stateActive: function () {
      this.getOrderList(0, 20, this.keyWord, false)
    }
}

猜你喜欢

转载自www.cnblogs.com/antyhouse/p/10278048.html