在页面中，最常见的莫过于列表，通常我们都是后台直接使用for循环遍历数组拼装成html页面，然后替换进模板里来展示，不过Vue只获取数据，所以这部分也要vue自己来实现。
我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
孤狼 | 
2022-07-29 02:13:07 | 
1879°C | 
0条评论 ]<div v-for="item in names">{{item}}</div>v-for 还支持一个可选的第二个参数，即当前项的索引。
<div v-for="(item, index) in items"></div>
<div v-for="(item, index) in names">{{index}}-{{item}}</div>v-for 遍历对象
<div v-for="value in info">{{value}}</div>
<div v-for="(value, key) in info">{{key}}-{{value}}</div>
<div v-for="(value, key ,index) in info">{{index}}-{{key}}-{{value}}</div>v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 key 来提供一个排序提示。当向列表中间数据发生变化时，提供了key的元素不会修改，只会移动，节省性能。
<div v-for="(item, index) in items" :key="item"></div>
<div v-for="(item, index) in books" :key="item.id">{{index}}-{{item.name}}</div>TIP：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key。建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制。
使用固定值来固定循环
<div v-for="n in num">{{n}}</div>
<div v-for="n in 10">{{n}}</div>Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push() //向数组的末尾添加一个或多个元素
pop() //删除数组的最后一个元素并返回删除的元素
shift() //把数组的第一个元素从其中删除，并返回第一个元素的值
unshift() //向数组的开头添加一个或更多元素，并返回新的长度
splice() //添加或删除数组中的元素[第一个参数位插入位置,第二个参数为删除数量,第三之后为插入元素]
sort() //对数组的元素进行排序
reverse() //用于颠倒数组中元素的顺序<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in names">{{item}}</div>
<div v-for="(item, index) in names">{{index}}-{{item}}</div>
<div v-for="(item, index) in books" :key="item.id">{{index}}-{{item.name}}</div>
<div v-for="(value, key) in info">{{key}}-{{value}}</div>
<div v-for="(value, key ,index) in info">{{index}}-{{key}}-{{value}}</div>
<button @click="add">增加国家</button>
<div v-for="n in num" :key="n">{{n}}</div>
</div>
<script>
let ndata={
names:['中国','美国','法国','小日本'],
books:[
{id:4,name:'mysql开发指南'},
{id:1,name:'美好的未来'},
{id:2,name:'山村老师'},
{id:3,name:'元宇宙的开发'},
],
info:{name:'张三',age:'15岁',height:'168cm'},
num:10
};
const app=new Vue({
el:"#app",
data:ndata,
methods:{
add(){
this.names.push('德国');
}
}
});
</script>
</body>
</html>
赞赏一个鸡腿
