昨天讲了条件渲染，今天来讲列表渲染(List Rendering)吧!!

v-for

当我们在页面上绑定资料时，遇到一些重复、复杂的data时(像是array、object等等)，就可以使用v-for把这些资料渲染出来。
v-for指令需要以item in items的形式来使用，其中items源数据array，item则是items array里面的元素，这边都可以自己取其它的名字!

Array

<div id="app">
    <ul>
        <li v-for="item in array">
            {{ item.pet }}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            array: [
                { pet: '猫猫' },
                { pet: '狗狗' },
			    { pet: '兔兔' }

            ]
        }
    });
</script>

出来的结果就会是”猫猫”、”狗狗”、”兔兔”列表式的排列。

在v-for中也可以使用上层(父作用域)的property，我们也可以使用索引(index)，就是从0开始到阵列长度。
这边我们帮这些宠物都加上可爱(　ﾟ∀ﾟ) ﾉ♡
然後因为index会从0开始，所以我们+1，这样就会从1开始!

<div id="app">
    <ul>
        <li v-for="(item,index) in array">
           {{index+1}}. {{cute}}{{ item.pet }}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            cute:'可爱',
            array: [
                { pet: '猫猫' },
                { pet: '狗狗' },
                { pet: '兔兔' }
            ]
        }
    });
</script>

Object

我们也可以用 v-for来遍历一个object的property，跟在array一样我们可以加上上层的property，但其巡览出来的资料是属性值。
小括号中的三个参数分别是property、property的名称也就是键值key、索引index，也就是(property, key, index)，可以改成自己喜欢的名字欧~

<div id="app">
    <ul>
        <li v-for="(value,name,index) in object">
           {{index+1}}.{{name}}:{{value}}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            object:{
                title: '菜鸟学前端，一起Vue起来!',
                theme: 'Modern Web',
                start: '2021.09.13'
            }
        }
    });
</script>

在遍历object时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

使用 of 代替 in

前面的例子我们都是以 in来设定 v-for ，但 vue 也提供了 JavaScript 语法中的 of 当作关键字，所以上面的例子都可以将 in 改为 of。

今天讲了一些v-for的基本用法，明天要讲什麽呢щ(ﾟДﾟщ)