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 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
js获取php变量的实现代码
Aug 10 Javascript
Jquery倒计时源码分享
May 16 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
Js代码中的span拼接问题解决
Nov 22 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python 异常处理实例详解
2014/03/12 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Django接收自定义http header过程详解
2019/08/23 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
Python中的With语句的使用及原理
2020/07/29 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
高二政治教学反思
2014/02/01 职场文书
玲玲的画教学反思
2014/02/04 职场文书
铁路工务反思材料
2014/02/07 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
会议邀请函
2015/01/30 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书