vue 使用v-for进行循环的实例代码详解
更新时间：2020年02月19日 14:26:49 作者：xsan
这篇文章主要介绍了vue 使用v-for进行循环的实例代码详解,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>vue中使用v-for</title>
</head>
<body>
<div id="app">
<h3>循环列表</h3>
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books" :key="book.title">
<td>{{index+1}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3>循环对象</h3>
<div v-for="(value,key) in person">
{{key}}:{{value}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
books: [{
title: '水浒传',
author: '施耐庵',
},
{
title: '三国演义',
author: '罗贯中',
},
{
title: '西游记',
author: '吴承恩',
},
{
title: '红楼梦',
author: '曹雪芹',
},
]
}
})
</script>
<script>
new Vue({
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进行循环的实例代码详解，希望对大家有所帮助，也非常感谢大家对脚本之家网站的支持！
相关文章
这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。需要的朋友可以参考下2018-11-11
Element通过v-for循环渲染的form表单校验的实现
日常业务开发中，form表单校验是一个很常见的问题，本文主要介绍了Element通过v-for循环渲染的form表单校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
今天小编就为大家分享一篇基于axios 的responseType类型的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最近做项目遇到一个需求，需要制作一个定制化的日历组件，本文主要介绍了从零写vue日历组件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue 使用typescript如何优雅的调用swagger API
这篇文章主要介绍了Vue 使用typescript如何优雅的调用swagger API,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】
这篇文章主要介绍了利用 proxytable 配置解决 vue-cli 的跨域请求问题,本文的目录结构基于 webpack 模板结构，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了VUE3使用JSON编辑器方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue项目通过命令行传参实现多环境配置(基于@vue/cli)的相关资料,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue数据操作之点击事件实现num加减功能,结合实例形式分析了vue.js事件响应及数值运算相关操作技巧,需要的朋友可以参考下2019-01-01
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
这篇文章主要介绍了Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-11-11
最新评论