Vue循环遍历：v-for 指令
pan_junbiao 2024-08-28 12:31:04 阅读 70
Vue 指令系列文章：
《Vue插值：双大括号标签、v-text、v-html、v-bind 指令》
《Vue指令：v-cloak、v-once、v-pre 指令》
《Vue条件判断：v-if、v-else、v-else-if、v-show 指令》
《Vue循环遍历：v-for 指令》
《Vue事件处理：v-on 指令》
《Vue表单元素绑定：v-model 指令》
1、v-for 指令
在程序设计中，循环控制是变化最丰富的技术。Vue.js 提供了列表渲染的功能，可将数组或对象中的数据循环渲染到 DOM 中。在 Vue.js 中，列表渲染使用的是 v-for 指令，其效果类似于 JavaScript 中的遍历。语法格式如下：
<code><ul>
<li v-for="item in userList" :key="item.userId">{ -- -->{item.userName}}</li>code>
</ul>
在应用 v-for 指令变量数组时，还可以指定一个参数作为当前数组元素的索引。语法格式如下：
<ul>
<li v-for="(item,index) in userList" :key="index">{ -- -->{index}} - { {item.userName}}</li>code>
</ul>
2、key 属性
使用 v-for 指令渲染的元素列表在更新时，如果数据项的顺序被改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素。为了是 Vue 能够跟踪每个 DOM 元素，需要为每一个数据项提供一个唯一的 key 属性。
注意：
从 Vue 2.2.0 版本开始，当在组件中使用 v-for 指令时，必须有 key 属性。
3、综合实例
【实例】使用 v-for 指令，循环遍历用户列表信息。执行结果如下图：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<meta name="author" content="pan_junbiao的博客">code>
<title>v-for指令</title>
<!-- 设置CSS样式 -->
<style type="text/css">code>
table {
border-collapse: collapse;
}
table,
table tr th,
table tr td {
border: 1px solid #ddd;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">code>
<table>
<tr>
<th>序号</th>
<th>用户编号</th>
<th>用户名称</th>
<th>博客信息</th>
</tr>
<tr v-for="(item,index) in userList" :key="item.userId">code>
<td>{ -- -->{index+1}}</td>
<td>{ {item.userId}}</td>
<td>{ {item.userName}}</td>
<td>{ {item.blogInfo}}</td>
</tr>
</table>
</div>
</body>
<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>code>
<script type="text/javascript">code>
// 使用 Vue.createApp 函数创建一个应用程序实例
const vueApp = Vue.createApp({
//数据
data() {
return {
userList: [
{
userId: 'A001',
userName: 'pan_junbiao的博客',
blogInfo: '您好，欢迎访问 pan_junbiao的博客'
},
{
userId: 'B002',
userName: 'pan_junbiao的博客',
blogInfo: 'https://blog.csdn.net/pan_junbiao'
},
{
userId: 'C003',
userName: 'pan_junbiao的博客',
blogInfo: '您好，欢迎访问 pan_junbiao的博客'
},
{
userId: 'D004',
userName: 'pan_junbiao的博客',
blogInfo: 'https://blog.csdn.net/pan_junbiao'
}
]
}
}
//使用 mount() 方法，装载应用程序实例的根组件
}).mount('#app');
</script>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。