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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
常用PHP封装分页工具类
2017/01/14 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
vuex 的简单使用
2018/03/22 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
执行力心得体会
2013/12/31 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL