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


Posted in Javascript onSeptember 26, 2018

最近使用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 循环加载数据并获取第一条记录的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 #Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 #Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 #Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 #Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 #Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 #Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 #Javascript
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP新手入门学习方法
2011/05/08 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
Python入门之modf()方法的使用
2015/05/15 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python opencv实现简易画图板
2020/08/27 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
建材业务员岗位职责
2013/12/08 职场文书
反邪教警示教育方案
2014/05/13 职场文书
授权委托书公证
2014/09/14 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
python中print格式化输出的问题
2021/04/16 Python
MySQL注入基础练习
2021/05/30 MySQL
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL