说明:

  1.开发使用的UI是mintUI,

要求:

1.获取6到13之间的数据:items.slice(6,13)

<mt-cell v-for="(item,index) in items.slice(6,13)" :title="item.title" :key='index'>
<a :href="item.url" :title="item.title" class="list-url">
<img :src="item.src" :alt="item.title" class="list-img"/>
</a>
</mt-cell>

2.获取小于0到6之间的数据:(两种)

  a:items.slice(0,6)

<mt-cell v-for="(item,index) in items.slice(0,6)" :title="item.title" :key='index'>
<a :href="item.url" :title="item.title" class="list-url">
<img :src="item.src" :alt="item.title" class="list-img"/>
</a>
</mt-cell>

  b:v-if="index < 6"

<mt-cell v-for="(item,index) in items" v-if="index < 6" :title="item.title" :key='index'>
<a :href="item.url" :title="item.title" class="list-url">
<img :src="item.src" :alt="item.title" class="list-img"/>
</a>
</mt-cell>

3.获取最后6条数据:items.slice(items.length-6,items.length)

<mt-cell v-for="(item,index) in items.slice(items.length-6,items.length)" :title="item.title" :key='index'>
<a :href="item.url" :title="item.title" class="list-url">
<img :src="item.src" :alt="item.title" class="list-img"/>
</a>
</mt-cell>

VUE:v-for获取列表前n个数据、中间范围数据、末尾n条数据的方法的更多相关文章

  1. 一张自增表里面总共有 7 条数据,删除了最后 2 条数据,重启 MySQL 数据库,又插入了一条数据,此时 id 是几?如何获取当前数据库版本?

    一张自增表里面总共有 7 条数据,删除了最后 2 条数据,重启 MySQL 数据库,又插入了一条数据,此时 id 是几? 一般情况下,我们创建的表的类型是InnoDB,如果新增一条记录(不重启mysq ...

  2. 获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1

    获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1

  3. WPF 微信 MVVM 【续】修复部分用户无法获取列表

    看过我WPF 微信 MVVM这篇文章的朋友,应该知道我里面提到了我有一个小号是无法获取列表的,始终也没找到原因. 前两天经过GitHub上h4dex大神的指导,知道了原因,是因为微信在登录以后,web ...

  4. Django restframwork获取列表详情

    z哎Django restframwork中就有一个类可以获取列表的详情内容,只有两行代码就可以搞定,在浏览器测试是ok的.但是这样的接口给前端,前端点击详情然后会将models.表名.objects ...

  5. SQL Server 获取满足条件的每个条件下的前N条数据

    从数据库获取数据时,经常会遇到获取一个数据列表和该列表中每条数据对应的另一个列表的情况,如果二级列表获取的是全部数据,那么就比较简单.如果二级列表获取的是前n条数据,就会比较麻烦. 从操作上来看,好像 ...

  6. DataTable相关操作,筛选,取前N条数据,去重复行,获取指定列数据

    #region DataTable筛选,排序返回符合条件行组成的新DataTable或直接用DefaultView按条件返回      /// <summary>      /// Dat ...

  7. vue实现一个评论列表

    <!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset=& ...

  8. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  9. Vue.js 多选列表(Multi-Select)组件

    搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...

随机推荐

  1. zrender的线性渐变

    线性渐变 官方文档是这样写的 实际运用是酱紫的 在把颜色放背景中 小白一枚,路过大神,多多指教.欢迎留下宝贵意见

  2. mybatis中延迟加载Lazy策略

    延迟加载: lazy策略原理:只有在使用查询sql返回的数据是才真正发出sql语句到数据库,否则不发出(主要用在多表的联合查询) 1.一对一延迟加载: 假设数据库中有person表和card表:其中p ...

  3. jsoncpp 源码编译与简单使用

    ******************************************************标准C++实现jsoncpp 源码使用编译(VC2012 MFC)(Qt5.2 Widget ...

  4. [思路题][LOJ2290][THUWC2017]随机二分图:状压DP+期望DP

    分析 考虑状压DP,令\(f[sta]\)表示已匹配状态是\(sta\)(\(0\)代表已匹配)时完美匹配的期望数量,显然\(f[0]=1\). 一条边出现了不代表它一定在完美匹配内,这也导致很难去直 ...

  5. Oracle Or子句

    Oracle Or子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,我们来学习如何使用Oracle OR运算符来组合两个或更多的布尔表达式. ...

  6. 通过Hadoop jmx收集Namenode,Jobtracker相关信息

    经常会有一些Hadoop监控的需求,例如datanode节点掉线,Tasktracker blacklist的数量,以及Namenode,Jobtracker的内存GC信息等. 之前采用Hadoop ...

  7. ijkplayer阅读笔记系列<转>

    http://blog.csdn.net/peckjerry/article/details/47663275

  8. 邻近双线性插值图像缩放的Python实现

    最近在查找有关图像缩放之类的算法,因工作中需要用到诸如此类的图像处理算法就在网上了解了一下相关算法,以及其原理,并用Python实现,且亲自验证过,在次与大家分享. 声明:本文代码示例针对的是plan ...

  9. JSON基础,简单介绍

    JSON(JavaScript Object Notation(记号.标记)) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...

  10. JS在页面输出九九乘法表

    <!--小练习,练习使用循环实现一个九九乘法表 第一步,最低要求:在Console中按行输出 n * m = t 然后,尝试在网页中,使用table来实现一个九九乘法表 --> <! ...