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 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
jquery实现pager控件示例
Apr 09 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
HTML+JS实现在线朗读器
Feb 15 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无刷新上传文件实现代码
2011/09/19 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
wxPython的安装与使用教程
2018/08/31 Python
python的turtle库使用详解
2019/05/10 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
全国文明单位申报材料
2014/05/31 职场文书
单位工作证明格式模板
2014/10/04 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2015年财政所工作总结
2015/04/25 职场文书
考勤制度通知
2015/04/25 职场文书
校园开放日新闻稿
2015/07/17 职场文书