vue.js中v-for的使用及索引获取

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

  

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


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

console.log：
         Parent-0-Foo
         Parent-0-Bar

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

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

这样可以直接用index

{{index}} 即可使用

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

 

     

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

4. 现在常用

     {{ item.text }}

onclick:function(event){
     event.preventDefault();
     let target = event.target
     console.log(target.getAttribute("data-index"));
     document.getElementById('index').value = 
     target.getAttribute("data-index");
    }
 }

5. 关于v-for版本2.0与1.x的区别

{{ index }}{{ item.text }}

变化如下：
el处需id，写body报错；
参数index需写在item后面；
作为事件参数时不用加$符。
此外，也可以提供第二个的参数为键名：

  {{ key }} : {{ value }}

第三个参数为索引：

  {{ index }}. {{ key }} : {{ value }}

总结

    {{index}}  // 此为每个item的index了