vue.js指令v-for使用及索引获取

1.v-for

　　直接上代码。

示例一：

 
 
 


 

 

  

  {{ tab.text }}
  
 
 
 
 

2.索引

　　在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

 

 {{ parentMessage }} - {{ $index }} - {{ item.message }}
 

var example2 = new Vue({
 el: '#example-2',
 data: {
 parentMessage: 'Parent',
 items: [
 { message: 'Foo' },
 { message: 'Bar' }
 ]
 }
})

　　另外，你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：

 {{ index }} {{ item.message }}

 　　从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：

示例二：

 
 
 


 

 

  
Text:{{option.text}}--Vlue:{{option.value}}
 
 
 

 你点击的索引为: {{ click }}
 
 

 
试着点击上方LI条目
 
 
 

3.在点击事件中取到索引

方法一：添加自定义属性

示例三：

 
 
 
 
 
 
 

  {{ item.text }}
 
 
 
 
 

方法二：直接传入索引值

示例四（和二差不多）：

 {{ item.text }}







 

　　效果与方法一相同。

如果想直接传索引可以用以下方法：

示例五：

 
 
 
 
 
 
 

  {{ item.text }}
 
 
 
 
 

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。