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 Tabs插件宿主IFRAMES
Jan 01 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 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 和 HTML
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python自动生成model文件过程详解
2019/11/02 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
《尊严》教学反思
2014/02/11 职场文书
计算机软件专业求职信
2014/06/10 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
谢师宴家长致辞
2015/07/27 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python