Vue.js的基本属性_v-for指令

1.v-for指令的使用v-for指令是基于一个数组来重复渲染的元素，通常用来显示列表和表格数据。循环数组<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#app{width: 600px;margin: 20px a

不吃薯条

224人浏览 · 2021-03-02 14:46:13

不吃薯条 · 2021-03-02 14:46:13 发布

1.v-for指令的使用
v-for指令是基于一个数组来重复渲染的元素，通常用来显示列表和表格数据。
循环数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#app{
				width: 600px;
				margin: 20px auto;
			}
			.box{
				box-shadow:0 0 10px 10px gainsboro;
				padding: 20px 100px;
				border-radius: 5px;
				margin-top: 20px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(items,index) in item":key="index">
					{{items}}.{{index}}
				</li>
			</ul>
			
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
			   item:[
				   "部门管理",
				   "员工管理",
				   "项目管理"
			   ]
			}
			
		});
	</script>
</html>

遍历对象属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#app{
				width: 600px;
				margin: 20px auto;
			}
			.box{
				box-shadow:0 0 10px 10px gainsboro;
				padding: 20px 100px;
				border-radius: 5px;
				margin-top: 20px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(value,name,index) in emp">
					{{index}}.{{name}}.{{value}}
				</li>
			</ul>
			
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
			   emp:{
				   user:"小五",
				   age:20,
				   job:"项目经理"
			   }
			   
			}
			
		});
	</script>
</html>