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

前言

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

步骤

使用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;
        }}

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

时间: 2024-12-28 00:29:48

vue点击加载更多——轻松实现vue底部点击加载更多的相关文章

javascript制作图javascript制作图片无限懒加载,轻松又实用片无限懒加载,轻松又实用

知识点:for循环语句,DOM概念,元素获取,动态布局,基本算法,节点操作,JQ与JS的关系与区别,JS的重要性,如何学习JS. html代码: <div id="box"><!--id="自定义的名称" 命名规范(见名知义:用有语义的英文单词)--> <ul><!--无序列表标签--> <!--img图片四要素:src width height alt(解释说明)--> <li></li

vue之better-scroll的封装,包含下拉刷新,上拉加载功能及UI(核心为借鉴,我仅仅是给轮子套上了外胎...)

先发原文作者.地址等信息.我把内容全部搬过来了,也可以去看原文.内容绝对是满满的干货,给原作者点赞!(我添加的内容在转载过来的后面,内容不多) 作者: ustbhuangyi 链接:http://www.imooc.com/article/18232 来源:慕课网 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实

无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性。

新建一个MVC4的项目,引用DAL后,将DAL的连接字符串考入: <connectionStrings>     <add name="brnmallEntities" connectionString="metadata=res://*/BrnMall.csdl|res://*/BrnMall.ssdl|res://*/BrnMall.msl;provider=System.Data.SqlClient;provider connection string

wpf prism4 出现问题:无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性。

WPF Prism 框架 程序 出现 问题: 无法加载一个或多个请求的类型.有关更多信息,请检索 LoaderExceptions 属性. 1.开始以为是配置的问题,找了半天,最后原来是有个依赖类库没有引用. 错误如图: 2.最后找到这个,原来是有个依赖模块问题: 如图: 哎呀,恍然大悟,主程序 引用System.Windows.Interactivity.dll类库,问题解决!

WebView加载本地Html文件并实现点击效果

Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行js和java的通信. 加载本地文件:webView.loadUrl("file:///android_asset/xxx.html"); 加载网页:webView.loadUrl("http://baidu.com"); 案例:(WebView加载本地Html并实现与J

“无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性 “之解决

今天在学习插件系统设计的时候遇到一个问题:“System.Reflection.ReflectionTypeLoadException: 无法加载一个或多个请求的类型. 于是百度一下,很多内容都差不多,摘抄一个: ------------------------------ 今天突然遇到“System.Reflection.ReflectionTypeLoadException: 无法加载一个或多个请求的类型.有关更多信息,请检索 LoaderExceptions 属性.”这样的报错,找了好长时

《Entity Framework 6 Recipes》中文翻译系列 (29) ------ 第五章 加载实体和导航属性之过滤预先加载的实体集合和修改外键关联

翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-13  过滤预先加载的实体集合 问题 你想过滤预先加载的实体集合,另外,你想使用Code-First来管理数据访问 解决方案 实体框架不支持直接使用Include()时过滤关联实体集合,但我们可以通过创建一个匿名类型来完成同样的事情,匿名类型包含实体和要过滤的关联实体集合. 假设你有如图5-28所示的概念模型 图5-28 一个包含movies(电影)和它的categories(目录)的模

easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法

我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是重新修改了定义语言的参数.假如我们用jquery初始化加载方法$(function(){//这里是我们自定义的操作方法});这个方法里面的东西执行后发现更本没加载我们的中文下面是我写的datetimebox日期控件js代码: $(function () { function adddaytimes(

git问题:git提交的时候总是提示key加载失败,总是需要手工将key加到Pageant中

问题描述: 重装过一次系统,在重装之前git+tortoisegit配合很好,提交的时候都能自动加载ppk,但是重装系统后,也重新生成pulic key上传到了服务器,但是每次提交的时候都提示key加载失败,必须手工的将key加载到pageant中才可以正常提交 问题分析: 每个git项目的config文件都保存了ppk的地址,重装完系统重新生成key后,ppk的保存路径和文件名都发生了变更,所以导致每次提交的时候,依据config都找不到ppk的地址,所以报错! 解决办法: 打开Tortois