提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

列表渲染案例

案例列表 渲染
2023-09-27 14:22:47 时间

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="huyiwei">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>
			列表渲染
		</title>
	</head>
	<body>
		<ul id="example-1">
			<li v-for="item in items">
				{{item.message}}
			</li>
		</ul>
		<script>
			var app = new Vue({
				//挂在元素
				el:"#example-1",
				data:{
					items:[
						{message:'Foo'},
						{message:'Bar'}
					]
				}
			})
		</script>
	</body>
</html>

样式

在这里插入图片描述
在这里插入图片描述

相关文章