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 清除输入框中的数据
Apr 13 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
document.write的几点使用心得
May 14 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
基于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操作XML作为数据库的类
2010/12/19 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
js实现图片轮播效果
2015/12/19 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
JS实现放大镜效果
2020/09/21 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python tkinter窗口最大化的实现
2019/07/15 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python对象的属性访问过程详解
2020/03/05 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
校庆接待方案
2014/03/18 职场文书
校园安全演讲稿
2014/05/09 职场文书
小学学校评估方案
2014/06/08 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书