Vue常用指令之五循环for指令和key指令

[TOC]

## 1、四种类型的遍历

1️⃣数组：v-for="item in list" 和 v-for="(item,i) in list" 第二种写法多了一个索引值，item是循环结果，i是对应结果的数组索引，i是从0开始的

2️⃣对象数组：v-for="item in objlist" 和 v-for="(item,i) in objlist" 对象数据遍历方式和数组是一样的，区别就是item是一个对象，取对象值：item.id……

3️⃣对象：v-for="value in obj" 和 v-for="(value,key) in obj" 以及 v-for="(value,key,i) in obj" 对象的遍历是对键和值的遍历，可以输出三种结果，键、值、索引

4️⃣数字：v-for="i in 4" 对数值的直接遍历

## 2、key指令的使用

当遍历的是一个组合DOM时，key是一个唯一值时而不是一个变化值时，这一组DOM的渲染就不会受到遍历对象的变化，而产生错误渲染结果。

![](/UploadFiles/images/20220503/6378719365573709448966344.png)

在下面的代码中我们首先两边勾选的都是id=2的刘备这栏，然后我们往对象数组objlist前添加了一个新的对象id=5的曹仁，这时我们就会发现两边勾选的结果不一样了，灰色块勾选还是id=2的刘备，黄色块却变成了id=1的曹操，显然黄色区域的结果不是我们想要的，这是因为在黄色区域遍历中我们没有给key指定一个唯一的值，在vue中如果我们没有指定key的话它默认就是遍历对象的索引值，我们最开始选中的就是索引值为1的刘备，当我们再新增一条新数据时，索引值对应的人也发生了变化，而vue渲染新的DOM时如果没有指定key，key默认就是索引index，那么它还是会将index=1的内容渲染为选中状态，就像黄色块一样。

## 3、数组方法unshift

unshift方法是往数组的前面添加数据，与push的往后添加数据正好成对

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">;
	<script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>;
</hred>
<div id="app">
    <div :style="{float:'left',width:'100%','margin-bottom':'50px'}">
        <div :style="{float:'left','background-color':'red',padding:'5px'}">
            <p v-for="item in list">{{item}}</p>
        </div>
        <div :style="{float:'left','background-color':'yellow',padding:'5px'}">
            <p v-for="(item,i) in list">值是：{{item}}—索引是：{{i}}</p>
        </div>
        <div :style="{float:'left','background-color':'green',padding:'5px',color:'white'}">
            <p v-for="item in objlist">id：{{item.id}}—名称：{{item.name}}</p>
        </div>
        <div :style="{float:'left','background-color':'pink',padding:'5px'}">
            <p v-for="(item,i) in objlist">id：{{item.id}}—名称：{{item.name}}—索引：{{i}}</p>
        </div>
        <div :style="{float:'left','background-color':'red',padding:'5px',color:'white'}">
            <p v-for="value in obj">{{value}}</p>
        </div>
        <div :style="{float:'left','background-color':'yellow',padding:'5px'}">
            <p v-for="(value,key) in obj">{{key}}—{{value}}</p>
        </div>
        <div :style="{float:'left','background-color':'green',padding:'5px',color:'white'}">
            <p v-for="(value,key,i) in obj">{{key}}—{{value}}—{{i}}</p>
        </div>
        <div :style="{float:'left','background-color':'pink',padding:'5px'}">
            <p v-for="i in 4">{{i}}</p>
        </div>
    </div>
    <div :style="{float:'left',width:'100%'}">
        <div :style="{'margin-bottom':'20px'}">
            id:<input type="text" v-model="id">
            name:<input type="text" v-model="name">
            <input type="button" value="添加" @click="add">
        </div>
        <div :style="{float:'left','background-color':'#ddd',padding:'5px'}">
            <p v-for="item in objlist" :key="item.id"><input type="checkbox"> id：{{item.id}}—名称：{{item.name}}</p>
        </div>
        <div :style="{float:'left','background-color':'yellow',padding:'5px'}">
            <p v-for="item in objlist"><input type="checkbox"> id：{{item.id}}—名称：{{item.name}}</p>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            id: "",
            name: "",
            list: [1, 2, 3, 4],
            objlist: [{ id: 1, name: "曹操" }, { id: 2, name: "刘备" }, { id: 3, name: "孙权" }, { id: 4, name: "刘协" }],
            obj: { id: 1, person: "关羽", sex: "男", name: "云长" }
        },
        methods: {
            add() {
                this.objlist.unshift({ id: this.id, name: this.name })
                this.id = this.name = "";
            }
        }
    })
</script>
</html>
```