vue 数组对象中某个字段值的索引值

我们用 v-for指令根据一组数组的选项列表进行渲染。v-for 指令需要使用item in items形式的特殊语法，items 是源数据数组并且item 是数组元素迭代的别名。
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数 index为当前项的索引。

<div id="app">
    <ul>
        <li v-for="(item, index) in items">
            {{parentMessage}} - {{index}} - {{item.message}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            parentMessage: 'parent',
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    })
</script>

可以用of代替in作为分割符，因为它是最接近javascript迭代器的语法：

<li v-for="item of items">
          {{item.message}}
</li>

2.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

数组更新检测

变异方法
vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push() //可向数组的末尾添加一个或多个元素，并返回新的长度
pop() // 要删除并返回数组的最后一个元素
shift() // 用于把数组的第一个元素从其中删除
unshift() // 可向数组的开头添加一个或更多元素，并返回新的长度
splice() // 向/从数组中添加/删除项目，然后返回被删除的项目
sort() // 对数组元素进行排序
reverse() // 用于颠倒数组中元素的顺序
打开控制台，用前面的例子的items数组调用变异方法

替换数组
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1、当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2、当你修改数组的长度时，例如：vm.items.length = newLength

解决这个问题
解决第一类问题： 可以使用vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名

vm.$set(vm.items, indexOfItem, newValue)

解决第二类 问题：可以使用splice：

vm.items.splice(newLength)