VUE-v-for循环

1、循环数组

 <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
list: [1, 2, 3, 4, 5, 6]

输出：

索引值：0 --- 每一项：1
索引值：1 --- 每一项：2
索引值：2 --- 每一项：3
索引值：3 --- 每一项：4
索引值：4 --- 每一项：5
索引值：5 --- 每一项：6

2、循环对象数组， :key指定唯一的 字符串/数字 类型，防止报错

 <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
</p>
 list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '赵高' },
          { id: 4, name: '韩非' },
          { id: 5, name: '荀子' }
        ]

输出：

口 1 --- 李斯
口 2 --- 嬴政
口 3 --- 赵高
口 4 --- 韩非
口 5 --- 荀子

3、循环对象

​
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
user: {
          id: 1,
          name: '托尼·汗',
          gender: '男'
}

​

输出：

值是： 1 --- 键是： id -- 索引： 0
值是： 托尼·汗 --- 键是： name -- 索引： 1
值是： 男 --- 键是： gender -- 索引： 2

4、循环数字

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

输出：

这是第 1 次循环
这是第 2 次循环
这是第 3 次循环
这是第 4 次循环