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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
javascript检测两个数组是否相似
May 19 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
angularJS开发注意事项
May 26 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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 特殊字符处理函数
2008/09/05 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
轮播的简单实现方法
2016/07/28 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
python遍历类中所有成员的方法
2015/03/18 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python中安装easy_install的方法
2018/11/18 Python
深入理解Django-Signals信号量
2019/02/19 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
园长自我鉴定
2013/10/06 职场文书
技术总监的工作职责
2013/11/13 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
信息总监管理职责范本
2014/03/08 职场文书
企业节能减排实施方案
2014/03/19 职场文书
数学备课组工作总结
2015/08/12 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js