VUE:v-for获取列表前n个数据、中间范围数据、末尾n条数据的方法
说明:
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条数据的方法的更多相关文章
- 一张自增表里面总共有 7 条数据,删除了最后 2 条数据,重启 MySQL 数据库,又插入了一条数据,此时 id 是几?如何获取当前数据库版本?
一张自增表里面总共有 7 条数据,删除了最后 2 条数据,重启 MySQL 数据库,又插入了一条数据,此时 id 是几? 一般情况下,我们创建的表的类型是InnoDB,如果新增一条记录(不重启mysq ...
- 获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1
获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1
- WPF 微信 MVVM 【续】修复部分用户无法获取列表
看过我WPF 微信 MVVM这篇文章的朋友,应该知道我里面提到了我有一个小号是无法获取列表的,始终也没找到原因. 前两天经过GitHub上h4dex大神的指导,知道了原因,是因为微信在登录以后,web ...
- Django restframwork获取列表详情
z哎Django restframwork中就有一个类可以获取列表的详情内容,只有两行代码就可以搞定,在浏览器测试是ok的.但是这样的接口给前端,前端点击详情然后会将models.表名.objects ...
- SQL Server 获取满足条件的每个条件下的前N条数据
从数据库获取数据时,经常会遇到获取一个数据列表和该列表中每条数据对应的另一个列表的情况,如果二级列表获取的是全部数据,那么就比较简单.如果二级列表获取的是前n条数据,就会比较麻烦. 从操作上来看,好像 ...
- DataTable相关操作,筛选,取前N条数据,去重复行,获取指定列数据
#region DataTable筛选,排序返回符合条件行组成的新DataTable或直接用DefaultView按条件返回 /// <summary> /// Dat ...
- vue实现一个评论列表
<!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset=& ...
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- Vue.js 多选列表(Multi-Select)组件
搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...
随机推荐
- php array_push()函数 语法
php array_push()函数 语法 作用:向第一个参数的数组尾部添加一个或多个元素(入栈),然后返回新数组的长度.博智达 语法:array_push(array,value1,value2.. ...
- 死锁(deadlocks)
1.定义 所谓死锁<DeadLock>: 是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象.若无外力作用,它们都将无法推进下去,此时称系统处于死锁状态或系统产生了 ...
- python 存取字典dict
数据处理的时候主要通过两个函数(1):np.save(“test.npy”,数据结构) ----存数据(2):data =np.load('test.npy") ----取数据 1.存列表 ...
- Eclipse中jar包的导出与导入
JAR的含义: JAR是Java的档案文件,是Java Archive File的缩写.jar文件是一种压缩文件,就是以特定类型压缩包的形式存在的完整Java项目.通常通过导入jar包的方式来使用实现 ...
- AutoCAD2008换硬盘后重新激活
1.打开“C:\Documents and Settings\All Users\Application Data\Autodesk\Software Licenses”,删除文件夹里面的所有*.da ...
- spring util包 StringUtils工具类中的isEmpty() 方法解析
今天在公司看到同事写的代码,无意发现在判断字符串类型时,使用的是StringUtils工具类中的isEmpty()去判断如下所示 @RequestMapping(value = "/pub/ ...
- db2数据库表操作错误SQL0668N Operation not allowed for reason code "1" on table "表". SQLSTATE=57016的解决方法
错误sql Operation not allowed for reason code "1" on table "MARKET.PURE_USER".. SQ ...
- you have not created a boot efi partition
rhel6.8 自定义分区,创建 /boot/efi 分区找不到”EFI System Partition“文件系统, 选其他文件系统 next时都提示:you have not created a ...
- 【后台管理系统】—— Ant Design Pro页面相关(一)
一.List列表形式 import React, { PureComponent } from 'react'; import { findDOMNode } from 'react-dom'; im ...
- 几个FFmpeg 视频参数 fps、tbr、tbn、tbc
我们用Ffplay播放文件或者视频流命令行会出现fps.tbr.tbn.tbc等参数如下图所示 图1 ffplay 播放文件示意图 fps表示平均帧率,总帧数除以总时长(以s为单位). tbr 表示 ...