v-for指令的使用

<div id="app">
    <ul>
        <li v-for="(item,index) in msg1">{{ item }}---{{ index }}</li>
        <br>
        <li v-for="(value,key,index) of msg2">{{ key }}---{{ value }}---{{ index }}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg1: ["橘子","香蕉","苹果"],
            msg2: { a: "apple",b: "banana",o: "orange"}
        }
    })
</script>

上图运行结果如下

由此可以发现：
1. 当我们在data里面存放一个数组的时候，在v-for指令中可以添加item、index两个选项，分别表示数组中的每一项和每一项所对应的索引，可以通过插值表达式将结果显示出来
2. 当我们在data里面放一个对象的时候，在v-for指令中可以添加value、key、index三个选项，分别表示值、键、索引，同样可以通过插值表达式显示出来 

key值的注意事项

首先我们使用数据的index索引来作为key值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div v-for="(item,index) in List" :key="index">key:{{ index }}---index:{{ index }}---name:{{ item.name }}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            List: [
                {id: 1, name: "t1"},
                {id: 2, name: "t2"},
                {id: 3, name: "t3"},
            ]
        }
    })
</script>
</body>
</html>

在data里面添加一条插队的数据

<div id="app">
    <div v-for="(item,index) in List" :key="index">key:{{ index }}---index:{{ index }}---name:{{ item.name }}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            List: [
                {id: 1, name: "t1"},
                {id: 4, name: "插队"},
                {id: 2, name: "t2"},
                {id: 3, name: "t3"},
            ]
        }
    })
</script>

运行结果分别如下

可以发现除了第一条数据可以复用以外，另外三条数据都需要重新渲染，因为key值发生了变化；这时候就可以体现出了一个效率问题，只插入了一条数据，却要重新渲染三条数据

再使用数据的id作为key值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div v-for="(item,index) in List" :key="item.id">key:{{ item.id }}---index:{{ index }}---name:{{ item.name }}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            List: [
                {id: 1, name: "t1"},
                {id: 2, name: "t2"},
                {id: 3, name: "t3"},
            ]
        }
    })
</script>
</body>
</html>

在data里面添加一条插队的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div v-for="(item,index) in List" :key="item.id">key:{{ item.id }}---index:{{ index }}---name:{{ item.name }}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            List: [
                {id: 1, name: "t1"},
                {id: 4, name: "插队"},
                {id: 2, name: "t2"},
                {id: 3, name: "t3"},
            ]
        }
    })
</script>
</body>
</html>

运行结果分别如下

可以发现，只有一条数据发生了变化，因为其他数据的id都没变，所以key值也没变，表明当我们使用id为key值时，当我们修改数据，它只会改变修改项的内容，不会对别的数据进行更新和修改，所以一般推荐使用id作为key值来配合v-for使用

总结：使用v-for指令能够完成数据遍历，使用id作为key值而不用index主要原因是：使用index时，修改一条数据，所有的数据全部被改变。使用id，修改数据时只会将修改的数据进行改变，别的数据不会变化