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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
javascript操作cookie
Jan 17 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
angular4实现带搜索的下拉框
Mar 25 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
PHP 上传文件的方法(类)
2009/07/30 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Django REST framework内置路由用法
2019/07/26 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python networkx包的实现
2020/02/14 Python
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
五年级学生评语
2014/04/22 职场文书
应届生求职信
2014/05/31 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
房屋出售授权委托书
2014/10/12 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2015年教师节活动总结
2015/03/20 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
教师研修随笔感言
2015/11/18 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python