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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
How to Auto Include a Javascript File
Feb 02 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
vue实现城市列表选择功能
Jul 16 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
js实现继承的方法及优缺点总结
May 08 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 getsiteurl()函数
2009/09/05 PHP
php标签云的实现代码
2012/10/10 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python提取页面内url列表的方法
2015/05/25 Python
利用python画一颗心的方法示例
2017/01/31 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
在python shell中运行python文件的实现
2019/12/21 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
质量承诺书怎么写
2014/05/24 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2015个人半年总结范文
2015/03/09 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
Python中的 enumerate和zip详情
2022/05/30 Python