【四二学堂】列表渲染三(v-for:vue系列入门示例之十七)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">			
			<ul>
				<li v-for="item,index in items" :key="index" >
					{{index}}:{{item.message}}
				</li>
				
				<hr>
				
				<!--针对对象的操作 -->
				<li v-for="value,key in object" :key="index">
					{{key}}:{{value}}
				</li>
			</ul>			
		</div>
		
		<script>
			vm=new Vue({
				el:"#app",
				data:{
					items:[
						{message:'leilie'},
						{message:'yuyu'}
					],
					object:{
						title:'how are you',
						author:'leilie',
						pulishedAt:'2020-3-23'
						}				
				}
			});
		</script>
	</body>
</html>

在这里插入图片描述

发布了402 篇原创文章 · 获赞 48 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_39593940/article/details/105056037