Vue中的列表渲染（v-for）

用 v-for 渲染普通数组

• 在data中定义普通数组

data:{
      list:[1,2,3,4,5]
}

• 在html中使用 v-for 指令渲染

<p v-for="(item,i) in list">索引值:{{i}}   每一项:{{item}}</p>

 用 v-for 渲染对象数组

• 在data中定义对象数组

data:{
      list:[1,2,3,4,5],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'}
      ]
}

• 在html中使用 v-for 指令渲染

<p v-for="(user,i) in listObj">id:{{user.id}}   姓名:{{user.name}}</p>

用 v-for 渲染对象

• 在data中定义对象

data:{
      user:{
        id:1,
        name:'Tom',
        gender:'男'
      }
}

• 在html中使用 v-for 指令渲染

<p v-for="(val,key) in user">key:{{key}}   val:{{val}}</p>

用 v-for 渲染数值

• v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

结果：

1 2 3 4 5 6 7 8 9 10