v-for，顾名思义，用于遍历数组或对象。
在使用v-for遍历对象以生成列表并且列表数据处于更新状态时，需要绑定一个key值以给vue一个提示，便于跟踪每个节点的身份而不是重用和重新排序现有元素。并且，key值是唯一的。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue hello world</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="e in user">
{
{ e }}
</span>
<hr>
<!-- 遍历数组-->
<ul>
<li v-for="i,index in nums">
{
{ index }} : {
{ i }}
</li>
</ul>
<hr>
<!-- 遍历对象-->
<span v-for="value,key,index in user">
{
{ index }} : {
{ key }} -- {
{ value }}
<br>
</span>
<hr>
<!-- 遍历对象数组-->
<span v-for="user,index in users" :key="user.id">
{
{ index }} : {
{user.name}} -- {
{ user.age }}
<br>
</span>
</div>
<script>
const app = new Vue({
//element 用来给vue实例定义一个作用范围
el: "#app",
// 用来给vue实例定义一些相关的数据
data: {
nums: [1, 24, 56, 23, 5],
users:
[{
id:0,name: "wuwl", age: 27}, {
id:1,name: "guopp", age: 25}],
user: {
name: "wuwl", age: 27}
}
,
methods: {
}
});
</script>
</body>
</html>
运行效果：
