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异步获取json数据方法汇总
Dec 22 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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函数
2006/10/09 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JavaScript 常用函数
2009/12/30 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Python包和模块的分发详细介绍
2020/06/19 Python
python中的错误如何查看
2020/07/08 Python
详解Scrapy Redis入门实战
2020/11/18 Python
目标责任书范文
2014/04/14 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
考察邀请函范文
2015/01/31 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
python如何做代码性能分析
2021/04/26 Python
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技