v-for如何使用

目标：列表渲染, 所在标签结构, 按照数据数量, 循环生成

⚫ 语法:

v-for="(值变量, 索引变量) in 目标结构"

v-for="值变量 in 目标结构"

⚫ 目标结构:

可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

⚫ 注意:

v-for的临时变量名不能用到v-for范围外

---

v-for如何循环列表?

1. 谁想循环就把v-for写谁身上

2. v-for=“(值变量, 索引变量) in 目标结构”-一定注意in两边必须有空格

3. 可以遍历数组 / 对象 / 固定数字

v-for注意事项?

值变量和索引变量不能用到v-for范围以外

---

详细代码

<template>
  <div>
    <!-- 语法:  v-for="(值变量, 索引变量) in 目标结构" 
                v-for="值变量 in 目标结构" -->
    <!--item项目   index数组的下标   -->
    <!-- key 键值对  -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
      <li v-for="val in stuArr" :key="val.id">{{ val }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["1", "2", "3"],
      stuArr: [
        {
          id: 1,
          name: "迪丽热巴",
          sex: "女",
          hobby: " 走秀",
        },
        {
          id: 2,
          name: "杨幂",
          sex: "女",
          hobby: "王者荣耀",
        },
        {
          id: 3,
          name: "成龙",
          sex: "男",
          hobby: "打架",
        },
      ],
    };
  },
};
</script>

<style>
</style>