被迫走上前端之路第六课之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 = 0const 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>