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 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...
随机推荐
- echart-如何画自定义的图形,三角形为例
- React Native 之项目的启动
运行项目有两种方法 1. 到根目录,执行 react-native run-ios 命令 会开启一个本地服务,加载jsbundle文件,然后是去index.js文件 import {AppRegist ...
- easyui 无限级数tree[menulist1 = GetMenuList(sm2,menulist1);]
// 左侧导航加载 function addNav(data) { $.each(data,function(i, sm1) { var menulist1 = "<ul id='tt ...
- [CF1177B]Digits Sequence (Hard Edition)题解
一个简单的模拟,首先先计算当前是几位数,然后根据几位数推断当前的数是什么,然后求出该位即可 #include <cstdio> int main(){ long long k; scanf ...
- HDU 6620 Just an Old Puzzle
Time limit 2000 ms Memory limit 262144 kB OS Windows 解题过程 感觉搜索不可行,状态太多了,120步,判断状态是否重复时,即使用std::map也太 ...
- 特征提取算法(3)——SIFT特征提取算子
目录: 前言 1.高斯尺度空间GSS 2.高斯差分DOG 用DoG检测特征点 GSS尺度选择 3.图像金字塔建立 用前一个octave中的倒数第三幅图像生成下一octave中的第一幅图像 每层octa ...
- 进阶1:Linux 环境准备_ 设置网络IP_安装火狐浏览器
VM 已安装 centos6.5 Final 已安装 配置好了Linux IP ,并能ping 通 ,例如 : ping www.baidu.com 设置LINUX 网络IP: https://j ...
- php服务器环境安装及项目搭建
2安装运行环境及搭建项目2.1安装apache及测试1)安装apacheyum install httpd 启动apache systemctl start httpd.service 查看运行状态 ...
- Centos7 yum安装OpenLDAP(普通用户可以更改密码)
环境 系统版本:centos7.4 openldap版本2.4 安装和配置 安装并启动服务 安装: yum install openldap openldap-servers openldap-cli ...
- python条件判断之直接加数字
if 后面跟的是条件表达式,条件表达式的结果为True或者False. (1)如果if后面的条件是数字,只要这个数字不是0,python都会把它当做True处理,见下面的例子: if 3: print ...