Vue基础之v-for指令的四种使用方式（3）

 

 

v-for中key的使用注意事项

必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值

<p v-for="item in list" :key="item.id">

  list: [
    { id: 1, name: '李斯' },
    { id: 2, name: '嬴政' },
    { id: 3, name: '赵高' },
    { id: 4, name: '韩非' },
    { id: 5, name: '荀子' }
  ]

1、v-for循环普通数组？

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

list: [1, 2, 3, 4, 5, 6]

2、v-for循环对象数组？

<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>

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

3、v-for循环对象？

<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>

注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引

  user: {
    id: 1,
    name: '托尼·屎大颗',
    gender: '男'
  }

4、v-for迭代数字？

<p v-for="count in 10">这是第 {{ count }} 次循环</p>

注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始