Vue2.js学习笔记-06(v-for指令迭代数组、对象数组、对象、数字)

本文链接：https://blog.csdn.net/u012430402/article/details/94205322

一、回顾

上一次学习了通过属性绑定为元素添加样式，今天主要学习v-for指令的迭代操作。

二、v-for指令学习

学习代码如下：

<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>Vue学习</title>
</head>
<body>
    <div id="app">
        
        <!-- 遍历数组 -->
        <p v-for="elem in arr">{{ elem }}</p>

        <!-- 遍历数组,同时获取数组的索引 -->
        <p v-for="(elem, i) in arr">元素为：{{ elem }} + 索引为：{{ i }}</p>

        <!-- 遍历对象数组 -->
        <p v-for="user in userArr">名字为：{{ user.name }} + 年龄为：{{ user.age }}</p>

        <!-- 遍历对象 -->
        <p v-for="(v , k, i) in obj">{{ k }} : {{ v }}  + 索引为：{{ i }}</p>

        <!-- 遍历迭代数字,从1开始  -->
        <p v-for="num in 10">{{ num }}</p>


    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        //创建vue实例
        var vm1 = new Vue({
            el:"#app",
            data:{      
              arr:[1,2,3,4,5,6],
              userArr: [
                  {name: "笑笑", age: 666},
                  {name: "嘻嘻", age: 888}
              ],
              obj: {
                  name: "笑笑obj",
                  gender: "男"
              }
            },
            methods: {
                
            }
        });
    </script>
</body>
</html>

另外注意一点，使用v-for迭代时，可以绑定一个key属性，该属性用于确定元素的唯一性，必须为string/number类型，如下：

<p v-for="num in 10" :key="num">{{ num }}</p>