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值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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报错越界的问题
最近在搞一个购物车的功能,里面有一个批量删除的操作,采用的是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哪个更快
目录 for-each实现方法 基准测试 原因分析 结论 对于Java循环中的For和For-each,哪个更快 通过本文,您可以了解一些集合遍历技巧. Java遍历集合有两种方法.一个是最基本的for循环,另一个是jdk5引入的for each.通过这种方法,我们可以更方便地遍历数组和集合.但是你有没有想过这两种方法?哪一个遍历集合更有效? for-each实现方法 For-each不是一种新语法,而是Java的语法糖.在编译时,编译器将此代码转换为迭代器实现,并将其编译为字节码.我们可以通过
-
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.当你修改数组的长度
随机推荐
- VirtualBox安装CentOS实现鼠标自动切换和复制粘贴功能
- 入侵ASP.net网站的经验附利用代码
- iOS实现视频压缩上传实例代码
- asp.net遍历目录文件夹和子目录所有文件
- 让多个输入框中的内容同时变化的js代码
- 深入掌握 react的 setState的工作机制
- Android应用借助LinearLayout实现垂直水平居中布局
- C++通过msxml调用webservice示例分享
- android基本控件ToggleButton&Switch使用指南
- jQuery复制表单元素附源码分享效果演示
- jQuery遍历节点方法汇总(推荐)
- javascript如何写热点图
- 关于批量导入域名到管理平台的说明
- vue实现添加与删除图书功能
- Apache ActiveMQ任意文件写入漏洞(CVE-2016-3088)复现
- php使用pecl方式安装扩展操作示例
- windows使用sqlpus连接oracle 数据库的教程图解
- 代码详解Java猴子选王问题(约瑟夫环)
- 在Windows Server 2019上配置NAS的方法
- Linux中Nginx添加自签证书TLS的方法