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 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...
随机推荐
- springboot日期转换器
注:该功能并非springboot特有的功能,springmvc同样具有 一.使用方法 创建一个DateConverter类实现Converter接口 注:importorg. ...
- js用逗号分隔字符串,保留双引号中的字符串
/** * 按逗号分解字符串, 引号中的逗号要保留, 并去除空值. * 方案: 1.将引号中都逗号替换为一个字符串中没有的符号; 2. 用split分解; 3. 去掉空值; 4. 还原引号中的逗号. ...
- 超好用json转excel工具
给大家安利一个超实用的json数据转excel工具:http://www.yzcopen.com/doc/jsonexcel
- android 开发架构学习
Android DataBinding(数据绑定)入门与实战 http://examplecode.cn/2018/07/20/android-databinding-01-introduction/ ...
- CSS3动画@keyframes图片变大变小颜色变化
在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...
- APK文件结构和安装过程
APK文件结构Android应用是用Java编写的,利用Android SDK编译代码,并且把所有的数据和资源文件打包成一个APK (Android Package)文件,这是一个后缀名为.apk的压 ...
- Solr单机环境搭建及部署
一.定义 官网的定义: Solr是基于Lucene构建的流行,快速,开放源代码的企业搜索平台.它具有高度的可靠性,可伸缩性和容错能力,可提供分布式索引,复制和负载平衡查询,自动故障转移和恢复,集中式配 ...
- java中的 sleep() 和 wait() 有什么区别?
1.每个对象都有一个锁来控制同步访问,Synchronized关键字可以和对象的锁交互,来实现同步方法或同步块.sleep()方法正在执行的线程主动让出CPU(然后CPU就可以去执行其他任务),在sl ...
- onchange and oninput
https://www.w3schools.com/jsref/event_oninput.asp Supported HTML tags: <input type="color&qu ...
- 应用安全 - 工具使用 - Nmap
TCP端口扫描类型 TCP connect扫描 三次握手完成/全连接/速度慢/易被检测到 TCP SYN扫描 半开扫描/发送SYN包启动TCP会话 TCP FIN扫描 半开扫描/发送SYN包启动TCP ...