【Vue】 -(6) 条件渲染和列表渲染

控制输出

js:

new Vue({
	el:'#list',
	data:{
		items:[
		{message:'111'},
		{message:'222'}
	]
	}
});
		
new Vue({
	el:"#test",
	data:{
		objects:[
			{people:
				[
					{name:'panzuhong',age:'20'},
					{name:'zhangfei',age:'12'}
				]
			},
			{animial:
				[
					{animalname:'dog',like:'eatfoot'},
					{birdname:'鸟',like:'飞'}
				]
			}
		]
	}
});
 

html:

1.条件渲染
	如果绑定表达式为true,显示,否则V-else,注意v-else要紧跟v-if
	<h1 v-if="ok">Yes</h1>
	<h1 v-else>No</h1>
	template v-if:用在切换选择多个元素的情况下
	<template v-if="ok">
		<h1>Title</h1>
		<p>Body</p>
		<p>Foot</p>
	</template>
	V-show:和V-if类似,不同点是v-show会始终渲染并保持在Dom中，他只是切换了css的display属性(频繁切换使用更好)
	两者有不同的特点,看实际情况选择
	<h1 v-show="ok">Hello</h1>
	
	2.列表渲染
	V-for:
	<ul id="list">
		<li v-for="item in items">
			{{item.message}}
		</li>
	</ul>
	
	template-for
	<ul>
		<template v-for="item in items">
			<li>{{item.msg}}</li>
			<a :href="url"></a>
		</template>
	</ul>
	------------------------------------------------<br /><br /><br /><br />
	<ul id="test">
		<template v-for="n in 10">循环次数:[{{$index+1}}][{{n+1}}]
			<template v-for="obj in objects">
				<template v-for="value in obj">
					<li>{{$key}}:<br />[
						<template v-for="vv in value">
							{<template v-for="(key,val) in vv">
								{{key}}：{{val}}，
							</template>}
						</template>]
					</li><br />
				</template>
			</template>
		</template>
	</ul>