码迷,mamicode.com
首页 > 其他好文 > 详细

vue点击加载更多——轻松实现vue底部点击加载更多

时间:2019-01-23 17:34:21      阅读:1224      评论:0      收藏:0      [点我收藏+]

标签:return   this   length   tom   底部   限制   前言   cli   bsp   

前言

这里接口直接请求了所有的数据,所以用的就不是分布请求的方法,而是逐步展现的方法

步骤

使用slice来进行限制展现从0,a的数据

<div v-for="user in draw_user.slice(0,a)" :key="user.uid" class="user-item">

//判断a的值是否小于数组的长度,小于就显示点击加载更多 <div class="load-more mr-bottom" v-if="a<draw_user.length" @click=‘loadMore‘ >点击加载更多</div> <div class="load-more mr-bottom" v-else >没有更多了</div>

data中定义a的数值

 data() {
        return {
            a:20
        };
}

methods定义方法

 methods: {
        loadMore:function(){
          this.a+=20;
        }

 

vue点击加载更多——轻松实现vue底部点击加载更多

标签:return   this   length   tom   底部   限制   前言   cli   bsp   

原文地址:https://www.cnblogs.com/wangyang0210/p/10309348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!