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 相关文章推荐
javascript中创建对象的三种常用方法
Dec 30 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php 文件上传类代码
2011/08/06 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python流程控制 if else实现解析
2019/09/02 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
简述python Scrapy框架
2020/08/17 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
如何进行Linux分区优化
2013/02/12 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
正规借条模板
2015/05/26 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
pytorch Dropout过拟合的操作
2021/05/27 Python