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>

上圖運(yùn)行結(jié)果如下

由此可以發(fā)現(xiàn)：
1. 當(dāng)我們?cè)赿ata里面存放一個(gè)數(shù)組的時(shí)候，在v-for指令中可以添加item、index兩個(gè)選項(xiàng)，分別表示數(shù)組中的每一項(xiàng)和每一項(xiàng)所對(duì)應(yīng)的索引，可以通過(guò)插值表達(dá)式將結(jié)果顯示出來(lái)
2. 當(dāng)我們?cè)赿ata里面放一個(gè)對(duì)象的時(shí)候，在v-for指令中可以添加value、key、index三個(gè)選項(xiàng)，分別表示值、鍵、索引，同樣可以通過(guò)插值表達(dá)式顯示出來(lái)?

key值的注意事項(xiàng)

首先我們使用數(shù)據(jù)的index索引來(lái)作為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里面添加一條插隊(duì)的數(shù)據(jù)

<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: "插隊(duì)"},
                {id: 2, name: "t2"},
                {id: 3, name: "t3"},
            ]
        }
    })
</script>

運(yùn)行結(jié)果分別如下

可以發(fā)現(xiàn)除了第一條數(shù)據(jù)可以復(fù)用以外，另外三條數(shù)據(jù)都需要重新渲染，因?yàn)閗ey值發(fā)生了變化；這時(shí)候就可以體現(xiàn)出了一個(gè)效率問(wèn)題，只插入了一條數(shù)據(jù)，卻要重新渲染三條數(shù)據(jù)

再使用數(shù)據(jù)的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里面添加一條插隊(duì)的數(shù)據(jù)

<!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: "插隊(duì)"},
                {id: 2, name: "t2"},
                {id: 3, name: "t3"},
            ]
        }
    })
</script>
</body>
</html>

運(yùn)行結(jié)果分別如下

可以發(fā)現(xiàn)，只有一條數(shù)據(jù)發(fā)生了變化，因?yàn)槠渌麛?shù)據(jù)的id都沒(méi)變，所以key值也沒(méi)變，表明當(dāng)我們使用id為key值時(shí)，當(dāng)我們修改數(shù)據(jù)，它只會(huì)改變修改項(xiàng)的內(nèi)容，不會(huì)對(duì)別的數(shù)據(jù)進(jìn)行更新和修改，所以一般推薦使用id作為key值來(lái)配合v-for使用

總結(jié)：使用v-for指令能夠完成數(shù)據(jù)遍歷，使用id作為key值而不用index主要原因是：使用index時(shí)，修改一條數(shù)據(jù)，所有的數(shù)據(jù)全部被改變。使用id，修改數(shù)據(jù)時(shí)只會(huì)將修改的數(shù)據(jù)進(jìn)行改變，別的數(shù)據(jù)不會(huì)變化