Vue入门02--for循环

最新推荐文章于 2023-12-03 13:19:36 发布

原创最新推荐文章于 2023-12-03 13:19:36 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue for循环 #Vue入门

Vue 专栏收录该内容

50 篇文章

订阅专栏

本文展示了一个使用Vue.js框架动态渲染列表项的基本示例。通过v-for指令，可以将数组中的每一项映射到一个<li>元素上，实现列表的动态更新。此示例中，我们创建了一个包含两个元素的数组，每个元素都有一个title属性，然后在页面上显示这些标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://lib.baomitu.com/vue/2.5.17/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in list">
					{{item.title}}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					list:[
					    {title:"First"},
					    {title:"Second"}
					]
				}
			})
		</script>
	</body>
</html>

显示：