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 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...
随机推荐
- 02-webpack的作用
webpack的作用,将不同静态资源的类型打包成一个JS文件,在html页面应用该JS文件的时候,JS文件里的html就可以正常的运行,去执行操作. 也可以加载前端页面的CSS样式.Img图片
- SpringBoot最新教程IDEA版【狂神说Java系列】
Spring Boot入门 1.spring boot是配置好的spring集成框架,约定大于配置 2.微服务:把service拆出来独立运行在各个机器上.看下面这两篇论文 原文地址:http://m ...
- react native之封装离线缓存框架
请求数据=>本地有无缓存+缓存数据是否过期 =>可用 =>不可用 将代码封装成一个DataStore.js文件, 这里面主要提供:从本地获取数据,从网络获取数据,创建本地时间戳,请求 ...
- SQL Server性能调优--优化建议(二)
序言 优化建议 库表的合理设计对项目后期的响应时间和吞吐量起到至关重要的地位,它直接影响到了业务所需处理的sql语句的复杂程度,为提高数据库的性能,更多的把逻辑主外键.级联删除.减少check约束.给 ...
- 跳转控制语句return
return语句的作用不是为了跳出循环,更常用的功能是结束一个方法,也就是退出一个方法,跳转到上层调用的方法处. 演示案例: 结束循环其实是结束了main方法 public static void m ...
- 一次傻乎乎的错误QAQ
东北联赛上有一道题,数据范围是2^60,当时不记得long long的范围,于是写了一个程序试了一下,把队友带入了一个大数的大坑QAQ(蠢哭). 当时写的代码是这样的: #include<ios ...
- php调接口批量同步本地文件到cos或者oss
代码: <?php namespace Main\Controller; use Common\Library\Vendor\ElasticSearch; use Common\Library\ ...
- sqlserver控制台-添加用户
1.右键新建登陆名 2. 常规选项 3.服务器角色 4.用户映射
- Django中间件添加白名单
一定记得配置 补充一点中间件是工作流程 中间件的详细流程 补充一点需求:在不用中间件的情况和下用装饰器做登陆的阻挡 在django中有自带的 登陆闭包函数只需要引出来就可以直接用了下面是步骤 在se ...
- fedora23中安装php-mysql等
scheme: [ski:M], ch本身还是发的k音, 如同school, 但爆破后发g 默认的, by default. 没有defaultly 基本上所有的短语, 修饰名词都是放在名词的后面的: ...