vue中的for

vue中的for

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="okk">
		<li v-for='iteam in list'>
			{{iteam.name}}
		</li>
	</div>
<hr>
	<div id="okk2">
		<li v-for='value in list'>
			{{value}}
		</li>
	</div>
<hr>
	<div id="okk3">
		<li v-for="(value,key) in list">
			{{key}} : {{value}}	
		</li>
	</div>
	<hr>

	<div id="okk4">
		<li v-for="(value,key,index) in list">
			{{index}}======={{key}} : {{value}}	
		</li>
	</div>

	<div id="aaa">
		<ul>
			<li v-for='n in 8'>
				{{n}}
			</li>
		</ul>
	</div>



	<script>
		var okk = new Vue({
			el:'#okk',
			data:{
				list:[
				{name:'小三'},
				{name:'小四'},
				{name:'小五'},
				]
			}
		})


		var okk2 = new Vue({
			el:'#okk2',
			data:{
				list: {
					name:'小明',
					age:18,
					city:'北京'
				}
			}
		})


		var okk3 = new Vue({
			el:'#okk3',
			data:{
				list: {
					name:'小明',
					age:18,
					city:'北京'
				}
			}
		})


		new Vue({
			el:'#okk4',
			data:{
				list: {
					name:'小明',
					age:18,
					city:'北京'
				}
			}
		})

		new Vue({
			el: '#aaa'
		})


	</script>

	
	
</body>
</html>

　　

posted @ 2018-09-20 22:09  CHVV  阅读(193)  评论(0)    收藏  举报