vue 取出v-for循环中的index值实例


Posted in Javascript onNovember 09, 2019

一开始接触到vue的for循环就觉得贼好用,重复性的东西再也不用ctrl C+ctrl V了好吗。不仅代码可复用了,而且提高了代码可读性、减轻了工作量,更重要的是写代码都有成就感了。

贴出个小小例子:

template

<ul v-for="(item,index) in pcState">
 <li>{{item.name}}</li>
 <li>{{item.state}}</li>
 <li>{{item.ip}}</li>
 <li>{{item.canCPU}}</li>
</ul>

script

data(){
   return {
    pcState:[
     {
      name:'abc',
      state:'on',
      ip:'192.168.0.1',
      canCpu:'8'
     },
     {
      name:'dce',
      state:'on',
      ip:'192.168.0.2',
      canCpu:'18'
     },
     {
      name:'asdf',
      state:'on',
      ip:'192.168.0.3',
      canCpu:'8'
     }
    ]
   }
  }

在template中,item指的就是循环中的元素本身,在本例中就是指PCState中的每个对象。而index则是元素的索引值,也就是本例中的对象在pcState数组中所占的下标。

好的,接下来贴出代码执行的结果:

执行结果

vue 取出v-for循环中的index值实例

恩,先不管样式,反正代码是成功的。

但是在实际项目中,我们有时候会想要取得循环中的index值,这个时候怎么办,我曾经想把v-model或是v-bind绑定在组件上以取得index,但是无效。后来我发现可以通过事件获取。当你触发一个事件时,可以顺便拿下他的值。恩,多说无益,贴上代码:

//template
<ul v-for="(item,index) in pcState">
 <li @click='getIndex(index)'>{{item.name}}</li>
 <li>{{item.state}}</li>
 <li>{{item.ip}}</li>
 <li>{{item.canCPU}}</li>
</ul>

//methods
getIndex(index){
 console.log(index);
}

这样不仅是index值,元素本身也可以拿到。

以上这篇vue 取出v-for循环中的index值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue v-for循环之@click点击事件获取元素示例
Nov 09 #Javascript
Vue实现页面添加水印功能
Nov 09 #Javascript
vue 实现特定条件下绑定事件
Nov 09 #Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 #Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 #Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 #Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 #Javascript
You might like
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP反射机制用法实例
2014/08/28 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery移动节点实例
2015/01/14 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python timeit模块的使用实践
2020/01/13 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
股权转让协议书范本
2014/04/12 职场文书
高中学生自我评价范文
2014/09/23 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
社区党务工作总结2015
2015/05/19 职场文书
首次购房证明
2015/06/19 职场文书