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的loading效果实现代码
Nov 05 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
layui表格数据重载
Jul 27 Javascript
原生js实现弹窗消息动画
Nov 20 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
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python getpass实现密文实例详解
2019/09/24 Python
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
外包公司软件测试工程师
2014/11/01 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript