vue中v-for的用法

当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用，如下

<div id="app">
    <ul>
        <li v-for="（person, index） in persons"> {{ person.name }} </li>
    </ul>
</div>
<script>
    var app= new Vue ({
    el: "#app",
    data () {
        return {
            persons: [
                { name: "岚枫秋秋"},
                { name: 'Json'}
            ]
        }
    }
})
</script>

在表达式中，persons是数据，person是当前的一条数据， index代表当前索引值。列表渲染也可以用 of 来代替 in 作为分隔符。
当遍历对象属性时候，有两个可选参数，分别键名和索引值。

<div id="app">
    <ul>
        <li v-for="（val, key,  index） in persons"> {{ person.index }} - {{ person.key }}: {{ person.val }} </li>
    </ul>
</div>
<script>
    var app= new Vue ({
    el: "#app",
    data () {
        return {
            persons: { 
                name: "岚枫秋秋",
                age: '29'
            }
        }
    }
})
</script>

和v-if一样，v-for可以用到template上，但是v-show不能用到template上。

vue在渲染元素时候，出于效率考虑，会尽可能复用已有的元素而非重新渲染，如果不希望这样，可以使用vue提供的key属性，可以让你自己决定是否要复用元素，key的值必须是唯一的