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>

原文地址:https://www.cnblogs.com/chig/p/11988378.html

时间: 2024-07-29 22:18:01

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

MySql 获取数据表中随机一条数据

通过sql语句获取数据表中的随意一条数据 -- rand() 获取0到1之间的随机浮点数 -- ((select max(id) from test) - (select min(id) from test)) * rand() 获取到随机数 -- + (select min(id) from test) 保证id为 最小ID与最大ID之间的数 select * from test where id >= ((select max(id) from test) - (select min(id)

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

#region DataTable筛选,排序返回符合条件行组成的新DataTable或直接用DefaultView按条件返回      /// <summary>      /// DataTable筛选,排序返回符合条件行组成的新DataTable或直接用DefaultView按条件返回      /// eg:SortExprDataTable(dt,"Sex='男'","Time Desc",1)      /// </summary>

vue router 参数获取

vue router 参数获取通常是通过$route.query和$route.params方法这里将这两种方式通过代码展示出来: 路由代码: import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import UserAdd from './components/UserAdd' import UserList from './components/UserList'

php如何获取到前两个页面的url

自己在学习过程中也遇到了类似的问题: 比如,后台是想做成这样子的: 但是实际则是这样的: 解决方法: 通过表单隐藏控件 <input type="hidden" name="prevurl" value="<?php echo $_SERVER['HTTP_REFERER']?>"> 这样$_SERVER['HTTP_REFERER']的值就暂时存到了$_POST[prevurl]里. 暂时没想到更好的方法. php如何获

vue父组件获取子组件的属性或方法

我遇到这样一个情况: 父组件代码片段: 1 <button @click="submit">提交</button> 2 <v-autoTextarea ref="autotext" placeholder="开始编辑..." class="content-input" fontSize="15px" 3 lineHeight="1.5" :value=&qu

Vue.js 入门指南之“前传”(含sublime text 3 配置)

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

selenium+java:获取列表中的值

selenium+java:获取列表中的值 (2011-08-23 17:14:48) 标签: 杂谈 分类: selenium 初步研究利用java+testNg框架下写selenium测试用例,今天学会了几个API:(1)获取页面上列表中的值,并打印输出:System.out.println(selenium.getTable("xpath=/html/body/div[3]/form/table.1.1")); //输出列表中第1行第1列的值(2)判断页面上是否有某个文本:(只能判

获取列表中某一个文件夹下的列表项集合(不包含子文件夹对象,也不包含子文件夹中的列表项)

RT,方法如下: 1 SPListItemCollection GetSubItemsWithoutFoldersInParrentFolder(SPFolder parrent) 2 { 3 SPList list = parrent.Item.ParentList; 4 SPQuery query = new SPQuery(); 5 query.Folder = parrent; 6 query.Query = "<Where><Eq><FieldRef Na

无序列表前小黑点图片替换方法

无须列表前小黑点图片替换方法: 直接上代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>无序列表小黑点图片替换</title> &l