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

一开始接触到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数组中所占的下标。

好的，接下来贴出代码执行的结果：

执行结果

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

但是在实际项目中，我们有时候会想要取得循环中的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值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue v-for循环之@click点击事件获取元素示例

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • Vue.js 利用v-for中的index值实现隔行变色

    首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果. 以下为完整代码,很简单,但也是个技巧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&

  • vue改变循环遍历后的数据实例

    废话不多说了,直接上代码吧! <dd class="clearfix" v-for="(item,index) in tableDataList" :class="index%2 != 0 ? 'dd-bg' : ''"> <div class="indexItem indexItem3 tal" title=""><span>{{item.status}}{{count

  • 在vue中,v-for的索引index在html中的使用方法

    如下所示: 以上这篇在vue中,v-for的索引index在html中的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue.js指令v-for使用及索引获取 Vuejs在v-for中,利用index来对第一项添加class的方法 Vue.js常用指令汇总(v-if.v-for等)

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

    一开始接触到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}}

  • 解决在for循环中remove list报错越界的问题

    解决在for循环中remove list报错越界的问题

    最近在搞一个购物车的功能,里面有一个批量删除的操作,采用的是ExpandableListView以及BaseExpandableListAdapter.视乎跟本篇无关紧要,主要是为了记录一个java基础.迭代器iterator的使用 一.错误代码(主要就是购物车的批量删除) /** * 删除选中的 */ public void delSelect() { int groupSize; if (mGropBeens != null) { groupSize = mGropBeens.size();

  • 为什么在foreach循环中JAVA集合不能添加或删除元素

    1. 编码强制规约 在<阿里巴巴Java开发手册>中,针对集合操作,有一项规定,如下: [强制]不要在 foreach 循环里进行元素的 remove/add 操作.remove 元素请使用 Iterator方式,如果并发操作,需要对 Iterator 对象加锁. public class SimpleTest { public static void main(String[] args) { List<String> list = Lists.newArrayList(); l

  • 浅谈Java循环中的For和For-each哪个更快

    浅谈Java循环中的For和For-each哪个更快

    目录 for-each实现方法 基准测试 原因分析 结论 对于Java循环中的For和For-each,哪个更快 通过本文,您可以了解一些集合遍历技巧. Java遍历集合有两种方法.一个是最基本的for循环,另一个是jdk5引入的for each.通过这种方法,我们可以更方便地遍历数组和集合.但是你有没有想过这两种方法?哪一个遍历集合更有效? for-each实现方法 For-each不是一种新语法,而是Java的语法糖.在编译时,编译器将此代码转换为迭代器实现,并将其编译为字节码.我们可以通过

  • Golang的循环中break和continue语句的用法讲解

    Golang的循环中break和continue语句的用法讲解

    Go语言break语句 在Go编程语言中的break语句有以下两种用法: break语句用于在循环立即终止,程序控制继续下一个循环语句后面语句. 它可用于终止在switch语句的情况(case). 如果你正在使用嵌套循环(即,一个循环在另一个循环中),break语句将停止最内层循环的执行,并开始执行的下一行代码的程序段之后. 语法 在Go break语句的语法如下: break; 流程图: 例子: 复制代码 代码如下: package main import "fmt" func ma

  • JS for循环中i++ 和 ++i的区别介绍

    平时都是这样写的for循环, for(var i = 0; i < 20 ; i++){ .... } 但我看有的人这样写 for (var i = 0; i < 20 ; ++i) { .... } 这样会对for循环有什么影响? 1.在for里好像没啥区别... 但是用在赋值的时候, 就有区别了... var a = 1; var b = a++; var c = 1; var d = ++c; console.log(b,d); // 1, 2 a++ 是先应用a, 然后再自加 ++a

  • 解决循环中setTimeout执行顺序的问题

    期望:开始输出一个0,然后每隔一秒依次输出1,2,3,4. for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } 结果:输出5. 原因:setTimeout 使函数延迟1s执行,而for循环执行完成还不到0.1秒,到执行函数的时候,其实 i 已经变成5了,因此console.log(i)输出5. 解决方法一:使用let块作用域. for (let i = 0; i < 5; i

  • Python循环中else,break和continue的用法实例详解

    本文实例讲述了Python循环中else,break和continue的用法.分享给大家供大家参考,具体如下: 在看Python的文档的时候看到了for和while语句和C语言中有一个最大的区别-可以有一个可选的else语句.这个语句的执行触发机制让我不大明白,通过代码测试才了解了什么情况下触发else语句."凡存在,皆合理",Python的设计者肯定是有他的目的,现在咱们来探究一番. 以for语句为例,开发环境Python3.4. Python循环中的else作用 循环中else的存

  • vue 重塑数组之修改数组指定index的值操作

    如下所示: vm.items[indexOfItem] = newValue vue不能检测数组的变动 想要实现可以使用vue的set方法 this.$set(this.items,indexOfItem,newValue); 补充知识:vue中利用索引直接设置一个数组项,不能触发视图更新的问题 由于 JavaScript 的限制,Vue 不能检测以下数组的变动: 1.当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 2.当你修改数组的长度

随机推荐