vue 取出v-for循环中的index值实例
2019-12-02 18:11
2236 查看
一开始接触到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.js 4- VUE.JS 使用 V-FOR 循环语句实例
- VUE v-for循环中每个item节点动态绑定不同函数的实例
- vue v-for循环数据列表,获取列表当前项的某一项的数据,例如id
- 使用hasOwnProperty()方法来为for-in循环过滤出实例属性
- vue v-for 遍历循环时的key值的报错
- 【Vue】处理边界情况:访问根实例、父级组件实例、子组件实例或子元素,依赖注入、程序化事件侦听器、循环引用、内联模板、X-Template、控制更新:强制更新、 v-once 创建低开销静态组件
- vue中v-for循环列表根据条件判断两边对齐效果(常用)
- 使用vue的v-for生成table并给table加上序号的实例代码
- Python——控制语句(for循环实例)
- for循环实例2
- vue v-for 循环复选框-默认勾选第一个的实现方法
- linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例
- linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例
- vue的for循环使用方法
- vue里面的v-for列表循环
- LabVIEW sum累加for循环实例
- Java之各种for循环对比和简单实例
- 集合框架中取出元素的方式for循环增强型与一般形式for循环的对比
- for循环结构常用实例介绍
- asp.net中用split循环取出【,】之间的每一个值!(源码,实例!)