vue 循环加载数据并获取第一条记录的方法

最近使用elment ui和vue.js，遇到需要像c:foreach类似的效果，就找了

vue的API：https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if

element ui：http://element.eleme.io/#/zh-CN/component/input

用法：

<el-card class="box-card" v-for="(month,index) in monthdata"
 v-if="index==0" v-bind:month="month" v-bind:index="index">
 <div slot="header" class="clearfix">
	<span style="line-height: 36px;font-size:17px ;color:#666 ;">
   <i style="color:#20a0ff ;font-style: normal;"> {{ index }} - {{ month.C_YEAR_MONTH }}</i> 月度目标
  </span>
  <i style="float: right;color:#20a0ff;line-height: 36px;cursor: pointer;"
   class="el-icon-caret-bottom" v-on:click="change()"></i>
 </div>
</el-card>

index就是索引，从0开始，v-if="index==0"就是获取数据集合的第一个，如果展示全部就不要加此条件

以上这篇vue 循环加载数据并获取第一条记录的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅析vue中常见循环遍历指令的使用 v-for

    vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu

  • Vue.js组件间的循环引用方法示例

    什么是组件: 众所周知组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展.下面话不多说了,来一起看看本文的正文内容. 引言 写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识. 为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用 本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件

  • Vue中控制v-for循环次数的实现方法

    在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据 v-for="(item,index) in domainList.slice(0, 2)" 用这样的方法可以截取循环的数据长度,从而控制循环的次数 2.通过v-if来控制 v-for="(item,index) in domainList" v-if="index<3" 在标签下紧跟v-if来进行控制,这里是用索引来进行控制的,所以循环的时候记得把i

  • vue2.0 循环遍历加载不同图片的方法

    demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div> 引入图片,注意路径: import con1 from "@/assets/img/con01.png"; impor

  • 基于vue v-for 多层循环嵌套获取行数的方法

    在做vue项目的时候难免会用到循环,可是但我们后台数据返回多条记录而且是多层嵌套关系的时候,我们需要获取当前第几次循环此时就会出现问题. 下面给大家介绍两种方式,第一种是基于数学公式:第一次循环*(第二次循环总长度)+1+第二次循环 可以获取当前第几次循环 第二种方法:是在方法中进行计算返回当前下标.废话不多说先看一下效果吧 具体代码如下: 测试数据json字符串: parentList: [{ childList: [{ index: 1, childName: "第一个节点" },

  • vue forEach循环数组拿到自己想要的数据方法

    如下所示: <el-checkbox v-for="(item) in jurisdictionContent" :label="item.id" :key="item.id" class="checkboxMargin"> <span>{{item.value}}{{item.checked}}</span> </el-checkbox> handleJurisdiction(

  • vue 循环加载数据并获取第一条记录的方法

    最近使用elment ui和vue.js,遇到需要像c:foreach类似的效果,就找了 vue的API:https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if element ui:http://element.eleme.io/#/zh-CN/component/input 用法: <el-card class="box-card" v-for="(month,index) in monthdata"

  • SQL获取第一条记录的方法(sqlserver、oracle、mysql数据库)

    SQL获取第一条记录的方法(sqlserver、oracle、mysql数据库)

    Sqlserver 获取每组中的第一条记录 在日常生活方面,我们经常需要记录一些操作,类似于日志的操作,最后的记录才是有效数据,而且可能它们属于不同的方面.功能下面,从数据库的术语来说,就是查找出每组中的一条数据.下面我们要实现的就是在sqlserver中实现从每组中取出第一条数据. 例子 我们要从上面获得的有效数据为: 对应的sql语句如下所示: select * from t1 t where id = (select top 1 id from t1 where grp = t.grp o

  • PHP实现在数据库百万条数据中随机获取20条记录的方法

    本文实例讲述了PHP实现在数据库百万条数据中随机获取20条记录的方法.分享给大家供大家参考,具体如下: 额,为什么要写这个? 在去某个公司面试时,让写个算法出来,当时就蒙了,我开发过程中用到算法的吗?又不是大数据开发,分析. 今天偶然想起来一个坑爹数据,如:PHP取百万条数据中随机20条记录,当时就用的算法. 1.先统计统计数据库多少条记录(这个做个数据缓存,如1小时重新统计一次), 2.根据总条数,随机1次,1次性取出20条记录(当然这个就相当于分页了,要求不高的话,这个最快,我用的就是这个)

  • mongodb 随机获取一条记录的方法

    原理: 1.先查询表中的记录总数 2.随机获取偏移量为0~总记录数-1 3.查询时skip偏移量,再获取1条记录 因本人测试环境PHP已升级到7.0以上,mongodb扩展使用支持php7.0以上的扩展,很多方法与php5.6不同.因此代码必须在php7.0以上运行.如果是php5.6环境,需要修改代码才能运行. 代码如下: function.php <?php // 连接mongodb function conn($host, $user, $passwd){ $server = 'mongo

  • vue图片加载失败时用默认图片替换的方法

    vue图片加载失败时用默认图片替换的方法

    前言 本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性 这样默认图片就设置好了: 这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高: 像后台管理

  • vue 使用鼠标滚动加载数据的例子

    关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下<vue.js 实战>中作者的一个解决策略: 1. 设置一个标志位用来判断数据是否在加载中 2. 将滚动区域设置成 overfow:auto(显示滚动条) 3. 给滚动区域加入监听事件并绑定ref属性 来获取DOM实例 4. 当鼠标滚动到底部时,加载数据 4.1 如果此时 标志位为true则 直接退出,不进行此时数据加载 关键代码如下: <template> //...代码省略 //该div

  • 解决bootstrap-select 动态加载数据不显示的问题

    如下所示: 在使用bootstrap-select 动态加载数据的时候,refresh和render方法是必须使用的,不然就必须使用jquery往li对象里面填充数据,因为在bootstrap-select 中界面显示数据是通过li对象显示的,而select对象只是用于填充数据的,所以不要搞混了 以上这篇解决bootstrap-select 动态加载数据不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • vue动态加载SVG文件并修改节点数据的操作代码

    先上一个马赛克图片叭. 接领导需求,动态实现电路图, 并附带放大.缩小功能. 以及不同的回路点击能弹窗显示相关节点的更多信息, 通俗一点讲: 随着用户点击放大和缩小, 点击位置保持不变,而且能实现点击交互. 初接触的时候,觉得根本没法下手呀,说说自己的思路叭, 从随着用户点击放大缩小位置不变,想到了SVG 但是需要动态加载进来呀,而且还需要需求不同节点的电流值, 从放大缩小来看, 首先想到的是 D3 在集合领导给的部分相关资料 综上: 进行了可行性的方案试探,也完成了整个功能的开发. 且听我细细

  • 详解vue模拟加载更多功能（数据追加）

    详解vue模拟加载更多功能（数据追加）

    使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组. //这是错误的写法 $.ajax({ type:'get', async:false, url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2', dataType

随机推荐