VUE v-for指令-CSDN博客

本文链接：https://blog.csdn.net/HelloWord176/article/details/105718990

v-for指令：

作用: v-for 是一个循环指令,可以循环数组对象以及字符串；

v-for：指令写在哪个标签上就会产生相应数组长度的该标签

一、循环数组：

v-for="(i , index) in name";

i (item) : 代表数组项，是一个变量，可以随意命名；所谓的数组项就是数组中的每一个值

index：代表的是数组的索引值，也是一个变量；

name : 是要循环的数组名；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for=""item in name>{{ item }}</li>
            <li v-for="(i,index) in name">{{index + 1}}{{i}}</li>
        </ul>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               name:['小明','小红','小花','小红']
           }
        });
    </script>
</body>

</html>

二、循环数组对象

第一个参数是对象键值对中的值（value）

第二个参数是对象键值对中的键（key）

第三个是索引值（下标）

外层循环：

<li v-for="item in cities">：

item：指的是对象 cities 中的两个数组 A和B；

里层循环：

<li v-for="i in item">{{i.id}} --- {{i.spell}} --- {{i.name}}</li>

i : 循环的是上面 item 中的A B 两个数组中的每一个对象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in cities">  <!--外层循环 循环之后得到的是A和B两个数组，-->>
                <ul>
                    <li v-for="i in item">{{i.id}} --- {{i.spell}} --- {{i.name}}</li><!--里层循环 循环的是A B两个数组，得到的是每个数组中的每个对象，然后在把对象中的而每个属性值渲染出来-->>
                </ul>
                
            </li>
            
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                cities: {
                    "A": [
                        {
                            "id": 56,
                            "spell": "aba",
                            "name": "阿坝"
                        },
                        {
                            "id": 57,
                            "spell": "akesu",
                            "name": "阿克苏"
                        },
                        {
                            "id": 58,
                            "spell": "alashanmeng",
                            "name": "阿拉善盟"
                        }
                    ],
                    "B": [
                        {
                            "id": 1,
                            "spell": "beijing",
                            "name": "北京"
                        },
                        {
                            "id": 66,
                            "spell": "baicheng",
                            "name": "白城"
                        },
                        {
                            "id": 67,
                            "spell": "baise",
                            "name": "百色"
                        }
                    ]
                }
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>

v-for 指令中的 key值：

可以防止数据错乱！！！

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染;

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    问题：
       点击用户名显示用户名的输入框,点击手机号显示手机号的输入框，并且点击哪个哪个字高亮？
    <div id="app">
        <p>
            <span @click="check(1)" :class="type == 1 ? 'active' : ''">用户名</span>
            <span @click="check(2)" :class="type == 2 ? 'active' : ''">手机号</span>
        </p>
        <!--我们可以设置一个key来区分他们-->
        <p v-if="type == 1"><input type="text" placeholder="用户名" key="one"></p>
        <p v-else> <input type="text" placeholder="手机号" key= "two"></p>
    
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                type: 1,
            },
            methods: {
                check(type){
                    this.type = type
                }
            }
        })
    </script>
</body>
</html>