被迫走上前端之路第六课之vue的v-for列表渲染

有时候我们需要动态显示一些标签重复的内容或者可迭代数据，如果手动一条条实现有点麻烦，而且代码看着不美观，这个时候就要用到v-for来实现

语法

其中，items是可迭代的对象

<!--写法一-->
<div v-for="item in items"></div>
<!--写法二-->
<div v-for="item of items"></div>

注：有时给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key
语法如下：

<div v-for="(item,index) in items" :key="index"></div>

这里的index相当于给循环的每个标签加了一个序号，然后通过key与该标签绑定，这样就可以唯一识别和追踪每个循环的标签（当然你也可以绑定别的值）

举个栗子

动态显示数组

<script setup>
const arr=[1,2,3,4,5,6]
</script>

<template>
  <div v-for="i in arr">
    {{i}}
  </div>
</template>

动态显示字典

<script setup>
import { ref } from 'vue'

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])
</script>

<template>
  <ul>
  <!-- 方法一-->
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
   <ul>
    <!-- 方法二-->
    <li v-for="(item,index) in todos" :key="index">
     {{item.id}} : {{ item.text }}
    </li>
  </ul>
</template>

动态显示对象

<script setup>
import { ref,reactive } from 'vue'

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})
</script>

<template>
   <ul>
    <li v-for="(value) in myObject">
			{{ value }}
    </li>
    <li v-for="(value,key) in myObject" :key=key>
			{{key}}:{{ value }}
    </li>
     <li v-for="(value,key,index) in myObject" :key=index>
			{{index}}-{{key}}:{{ value }}
    </li>
  </ul>
</template>

嵌套实现

<script setup>
import { ref,reactive } from 'vue'

const items = reactive({
  title: ["hhh","nnn","mmm"],
  author: [1,2,3],
  publishedAt: [4,5,6]
})
</script>

<template>
   <li v-for="(value,key) in items">
  <span v-for="childItem in value">
    <div>
      {{ key }}： {{ childItem }}
    </div>
  </span>
</li>
</template>

更多详情，参见官网：列表渲染