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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 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+mysql事务rollback&amp;commit示例
2010/02/08 PHP
php 操作调试的方法
2012/07/12 PHP
初识laravel5
2015/03/02 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js分页代码分享
2014/04/28 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
优秀的应届生自荐信
2014/05/23 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
成绩单评语
2015/01/04 职场文书