怎么在vue中使用v-for实现循环

tangjin

作者

本篇文章为大家展示了怎么在vue中使用v-for实现循环，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

代码如下所示：

怎么在vue中使用v-for实现循环

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
<title>vue中使用v-for</title>
</head>
<body>
<divid="app">
<h4>循环列表</h4>
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<trv-for="(book,index)inbooks":key="book.title">
<td>{{index+1}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</tbody>
</table>
</div>
<divid="app2">
<h4>循环对象</h4>
<divv-for="(value,key)inperson">
{{key}}:{{value}}
</div>
</div>
<script>
newVue({
el:'#app',
data:{
books:[{
title:'水浒传',
author:'施耐庵',
},
{
title:'三国演义',
author:'罗贯中',
},
{
title:'西游记',
author:'吴承恩',
},
{
title:'红楼梦',
author:'曹雪芹',
},
]
}
})
</script>
<script>
newVue({
el:'#app2',
data:{
person:{
name:'Xsan',
age:26,
}
}
})
</script>
</body>
</html>

　"(book,index) in books"是循环表达式，式中的“(book,index)”不可调换位置，对象，第二个才是索引，且索引是从0开始的，所以在下面写序号时，才会是“+1” 第一个永远为对象。

　　　循环状态保持。默认情况下，如果数组中的顺序发生变化，或者个数发生变化导致重新渲染，那么vue会重新利用之前的元素，而不会重新排序，这样在某些情况下可能是想要的，但是绝大部分情况可能不是我们想要的，这时候可以添加key属性。可以只能够是number和str类型，那么在循环时一般使用循环出来的对象的某个唯一值，不要使用index来做key，这样虽然用了，但是没有效果。在vue2.2.x以上，在自定义组件上使用v-for，key是必须要写的。

上述内容就是怎么在vue中使用v-for实现循环，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-03-21 22:40:20

vue