我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items形式的特殊语法，
item
其中 items 是源数据的数组，而 item 是迭代项的别名。
<template><h1>列表渲染</h1><p v-for="item in names"> {{ item }} </p>
</template>
<script>export default{data(){return{names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统']}}}
</script> 
复杂数据
大多数情况，我们渲染的数据源来源于网络请求，也就是JSON格式
<template><h1>列表渲染</h1><div v-for="item in result"><p> {{ item.title }} </p><p> {{ item.url }} </p></div>
</template>
<script>export default{data(){return{result:[{id:"1",title:"xx大学成功获批国家社会科学基金重大项目",url:"https://www.hbu.edu.cn/info/1167/20000.htm"},{id:"2",title:"2024年xx省高校图书馆年会在xx大学举办",url:"https://www.hbu.edu.cn/info/1167/20015.htm"},{id:"3",title:"xx大学举办2025年研究生元旦晚会",url:"https://www.hbu.edu.cn/info/1167/20023.htm"}]}}}
</script>
v-for 也支持使用可选的第二个参数表示当前项的位置索引
<template><h1>列表渲染</h1><p v-for="(item,index) in names">{{ index }}-{{ item }} </p>
</template>
<script>export default{data(){return{names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统'] }}}
</script>
你也可以使用 of 作为分隔符来替代 in 这更接近JavaScript的迭代器语法
v-for 与对象
你也可以使用v-for来遍历一个对象的所有属性
<template><h1>列表渲染</h1><p v-for="(value,key,index) of userInfo">{{ value }} - {{ key }} -{{ index }}</p></template>
<script>export default{data(){return{userInfo:{name:"张三",age:20}}}}
</script>
通过key管理状态
Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的key：
<template><h1>key属性添加到v-for当中</h1><p v-for="(item,index) in names" :key="index">{{ item }}</p></template>
<script>export default{data(){return{names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统'] }}}
</script>
Key的来源
请不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化
<template><h1>列表渲染</h1><div v-for="(item,index) in result" :key="item.id" ><p> {{ item.title }} </p><p> {{ item.url }} </p></div>
</template>
<script>export default{data(){return{result:[{id:"1",title:"xx大学成功获批国家社会科学基金重大项目",url:"https://www.hbu.edu.cn/info/1167/20000.htm"},{id:"2",title:"2024年xx省高校图书馆年会在xx大学举办",url:"https://www.hbu.edu.cn/info/1167/20015.htm"},{id:"3",title:"xx大学举办2025年研究生元旦晚会",url:"https://www.hbu.edu.cn/info/1167/20023.htm"}]}}}
</script>
