Vue v-for指令对象数组

Vue v-for指令教程

Vue v-for 指令可以用来遍历数组或者对象以及对象数组。Vue v-for 指令可以根据 data 中数据的更新动态刷新视图。

案例

Vue v-for遍历对象数组

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-for 指令遍历对象数组</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<p v-for='item in list'>Id:{{item.id}}  ---  Name:{{item.name}}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			list:[
				{id:1, name:'HTML'},
				{id:2, name:'CSS'},
				{id:3, name:'JavaScript'},
				{id:4, name:'Vue'},
			]
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

38 vue vfor obj.png

我们使用了 Vue v-for 指令来遍历对象数组。

Vue v-for指令对象总结

Vue v-for 指令可以用来遍历数组或者对象以及对象数组。