【Vue】指令之v-for【Vue】学习笔记——Vue常用指令之v-for 1. v-for的使用 v-for用于循环创

【Vue】学习笔记——`Vue`常用指令之`v-for`

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

1. v-for的使用

<p v-for="item in items" :key="item.id">{{ item.msg }}</p>

v-for用于循环创建绑定的标签，v-for 还支持一个可选的第二个参数，即当前项的索引 index。

<p v-for="(item, index) in items" :key="index">{{ item.msg }}</p>

具体实例如下：

<body> 
    <div id="app"> 
        <p v-for="(item, index) in items" :key="index">{{ item.msg }}</p>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script> 
    <script> 
        var app = new Vue({ 
            el:"#app",
            data: {
                items: [
                    { msg: "信息1" },
                    { msg: "信息2" },
                    { msg: "信息3" }
                ]
            },
        });
    </script> 
</body>

2. 总结

v-for指令的作用是：循环创建绑定的标签
v-for支持一个可选的第二个参数，即当前项的索引index。
可以用 of 替代 in 作为分隔符
v-for不只是使用数组遍历，还能使用对象

关于v-for 官方文档