Vue3快速入门——列表遍历v-for
原创
前言
Vue.js 是一款用于构建用户界面的渐进式JavaScript框架。Vue3是Vue.js的最新版本，它带来了许多新特性和改进，其中之一就是更强大的遍历功能。在前面入门了Vue3，通过四步骤让后端人员成功入门Vue3，本文将为继续介绍其他基础知识，如何在Vue3中使用v-for指令遍历列表，帮助您快速入门Vue3。
代码案例
首先，先介绍一下v-for的语法结构，跟java的for循环变量有点相识，先看java的foreach：
for (String cacheName : names) {
}接下来看一下Vue3的
语法：v-for="(item,index)in items'
参数说明:
- items：为遍历的数组
- item：为遍历出来的元素
- index ：为索引/下标，从0开始 ，可以省略，省略index语法:v-for="item in items
接下来，在之前Vue3 hello的基础上，新增表格，并且遍历表格的数据，假设有数据：
[
{
category: "时事",
time: "2023-09-5",
state: "已发布",
title: "中国男篮缘何一败涂地?",
},
{
category: "篮球",
time: "2023-09-5",
state: "草稿",
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
},
{
category: "旅游",
time: "2023-09-5",
state: "已发布",
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
},
],我们只要把数据放到data中，然后使用v-for 绑定遍历数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 v-for Example</title>
</head>
<body>
<!-- 步骤1 定义vue关联模块-->
<div id="app">
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>分类</th>
<th>时间</th>
<th>状态</th>
<th>标题</th>
</tr>
<tr v-for="(item, index) in articleList" :key="index">
<td>{{ item.category }}</td>
<td>{{ item.time }}</td>
<td>{{ item.state }}</td>
<td>{{ item.title }}</td>
</tr>
</table>
</div>
<script type="module">
// 步骤2 引入vue模块 在线CDN的引入方式，从vue.esm-browser.js获取到createApp
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 步骤3 创建Vue实例，挂载到app div上
createApp({
// 步骤4 定义数据这些数据会跟上面绑定的div关联
data() {
return {
articleList: [
{
category: "时事",
time: "2023-09-5",
state: "已发布",
title: "中国男篮缘何一败涂地?",
},
{
category: "篮球",
time: "2023-09-5",
state: "草稿",
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
},
{
category: "旅游",
time: "2023-09-5",
state: "已发布",
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
},
],
}
}
}).mount('#app')
</script>
</body>
</html>在这个示例中，我们使用v-for指令在<tr>元素中循环渲染articleList数组中的每个元素。v-for指令的语法为(item, index) in articleList，其中item表示当前循环的元素，index表示当前循环的索引。我们还使用:key属性为每个<tr>元素提供了一个唯一的键，以便Vue可以跟踪每个元素的身份。
最终结果如下：
总结
在本文中，我们介绍了如何在Vue3中使用v-for指令遍历列表。通过使用v-for，可以轻松地在Vue应用程序中显示和操作动态列表数据，希望这篇文章能帮助快速入门Vue3并掌握其遍历功能，后面将继续讲解Vue3的其他基础知识。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。