唉呀，今天再一篇v-for，不知道v-for分两篇会不会觉得太灌水，但我还是分两篇了✧*｡٩(ˊᗜˋ*)و✧*｡

Key

维护状态

当Vue正在更新使用v-for渲染的元素列表时，它会默认使用就地更新的策略。v-for 上所渲染的资料若是更动顺序，DOM元素在渲染时，并不会随便顺序更动，而是就地更新每个元素，并确保他们在每个索引位置正确渲染，这样的渲染方式若用於元素单纯的状态下其实是高效的。

这时候加上 key属性就可以解决这个问题!它可以让 vue 有个依据来辨识每个节点。

拿前一天的两个范例来说明!
我们在v-for後面用v-bind去绑定一个key属性，key记得要绑定唯一的值!

<ul>
    <li v-for="(item,index) in array" :key="index">
        {{index+1}}. {{cute}}{{ item.pet }}
    </li>
</ul>
<ul>
    <li v-for="(value,name,index) in object" :key="name">
        {{index+1}}.{{name}}:{{value}}
    </li>

</ul>

再度提醒v-bind的缩写是:欧( ～'ω')～

在v-for里使用值范围

v-for 除了我们昨天讲到的array及object的渲染方式，它还有一个特殊的渲染方式，可以用整数做渲染，它会把模板重复对应次数。
像是n in 10 ，n表示目前所在数字，而10表示范围定义。

<ul>
    <li v-for="n in 10">{{n}}</li>
</ul>

显示过滤或排列後的结果

当我们想要呈现过滤後或排序後的数据，却不想变更或重置原始数据，这时候我们就可以用到之前讲过的计算属性computed来返回过滤後的数据了ε٩(๑> ₃ <)۶з

<div id="app">
    <ul>
        <li v-for="n in evenNumbers">{{ n }}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            numbers: [1, 2, 3, 4, 5]
        },
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    });
</script>

结果就只会显示是偶数的2、4。

使用计算属性可以解决大部分的需求，但如果资料有用到巢状v-for 的话，就没办法用计算属性了，这时候我们可以改用方法methods来达成需求╰(°▽°)╯

<div id="app">
    <ul v-for="set in sets">
        <li v-for="n in even(set)">{{ n }}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            sets: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]
        },
        methods: {
            even: function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    });
</script>

在 <template> 上使用 v-for

跟v-if相同，v-for也可以使用 <template> 一次渲染多个元素:
在这边，index、name用一个<li>渲染，而value用不同的<li>渲染。

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

v-for 与 v-if 一同使用

当他们在同一个节点的时候，v-for的优先级比 v-if更高，所以v-if将分别重复执行在每个v-for的循环中。

<ul>
    <li v-for="(value,name,index) in object" v-if="index > 0">
        {{index+1}}.{{name}}:{{value}}
    </li>
</ul>

data: {
        object: {
            title: '菜鸟学前端，一起Vue起来!',
            theme: 'Modern Web',
            start: '2021.09.13'
        }
}

像这个例子，v-if每次渲染前会经过v-for，所以在这个例子它会执行三次，看起来就像:

<li v-if="index > 0"> {{index+1}}.{{name}}:{{value}}</li>
<li v-if="index > 0"> {{index+1}}.{{name}}:{{value}}</li>
<li v-if="index > 0"> {{index+1}}.{{name}}:{{value}}</li>

但判断完後最後的结果只有两个

<li>2.theme:Modern Web</li>
<li>3.start:2021.09.13</li>

所以如果我们的目的是想要有条件地跳过循环运行，我们可以把v-if放在外层元素或是<template>上。

欧耶，v-for是真的讲完了喇，明天又是个新开始!!大家要加油啊啊啊，远距了好久终於要回学校了，终於可以看到认识的人类们ㄌヾ(´∀ ˋ)ﾉ但要比较早起床有点累哈哈哈