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

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

<ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>

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 用于一个对象，则可以为对象的键指定一个别名）：

<div v-for="(index, item) in items">
  {{ index }} {{ item.message }}
</div>

这样可以直接用index

<span>{{index}}</span> 即可使用

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

<div v-for="item of items"></div>

 <ul>
     <li v-for="option in options">
         <p class="text-success" v-on:click="getIndex($index)">Text:{{option.text}}--Value:{{option.value}}</p>
      </li>
 </ul>

4. 现在常用

<div>
     <a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick"  href=" ">{{ item.text }}</a>
</div>
<input type="text" name="" id="index" value=""/>

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的区别

<a v-for="(item,index) in items" v-on:click="onclick(index)" href="javascript:void(0)">{{ index }}{{ item.text }}</a>

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

<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

第三个参数为索引：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

总结

<div v-for="(item, index) in items">
    <span>{{index}}</span>  // 此为每个item的index了
</div>