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 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
基于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+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JS中递归函数
2016/06/17 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
详解vue高级特性
2020/06/09 Javascript
python实现中文输出的两种方法
2015/05/09 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Python实现手绘图效果实例分享
2020/07/22 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
建筑工程技术应届生自荐信
2013/09/27 职场文书
工作过失检讨书
2014/02/23 职场文书
小学生评语集锦
2014/04/18 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
晚会开场白和结束语
2015/05/29 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js