框架小白白白白的进阶之路---Vue（二）条件渲染指令和循环指令

条件渲染指令

v-if
v-if主要用来控制代码的显示或隐藏条件值为true，代码显示（代码生效），为false时，代码隐藏（代码无效）

		<div id="app">
			<p v-if="msg">msg</p>
			<p v-if="info">info</p>
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:"#app",
				data:{
					msg:false,
					info:true,
				},
			})
		</script>

结果

v-else和v-else-if

v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”，可以链式地使用多次。
三者的关系相当于javase中的 if、 else 、 和 else if
可以用来不需要页面跳转就实现页面跳转的效果

	<div id="app">
		<div v-if="page=='login'">这里是登录页面</div>
		<div v-else-if="page=='register'">这里是注册页面</div>
		<div v-else >这里是啥也不是</div>
		<div id="butgroup">
			<button type="button" @click="goto('login')">去登陆</button>
			<button type="button" @click="goto('register')">去注册</button>
			<button type="button" @click="goto('other')">哪也不去</button>
		</div>
	</div>
	<script type="text/javascript">
		let vm=new Vue({
			el:"#app",
			data:{
				page:'login'
			},
			methods:{
				goto(msg){
					this.page=msg
				}
			}
		})
	</script>

结果
可以通过点击按钮控制显示的页面内容

循环指令

对象的遍历
v-for

		<div id="app">
			<div  v-for="(value, key,index) in object"> <!-- value值是必须有的，当只遍历value值时   写为<div  v-for="value in object"> -->
			    {{ index }} : {{ key }} : {{ value }}   <!-- 当只遍历value值时   写为 {{ value }} -->
			</div>
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:"#app",
				data:{
					object: {
					    firstName: 'John',
					    lastName: 'Doe',
					    age: 30
					}
				}
			})
		</script>

数组的遍历

		<div id="app">
			<div v-for="(item, index) in items">  <!-- 当不需要遍历出下标时，写为  <div v-for="item in items">  item是必须要遍历的，如果需要遍历下标，需要将 index写在item后面：v-for="(item, index) in items"-->
				{{index}}:{{item}}
			</div>
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:"#app",
				data:{
					items: ['apple', 'tomato', 'banana', 'watermelon']
				}
			})
		</script>

对象数组的遍历

		<div id="app">
			<div v-for="(item, index) in objects"><!--item 为必须写的值 代表的是一个对象 通过item.可以遍历对象内的属性-->
				{{index}}:{{item.firstName}}:{{item.lastName}}:{{item.age}}<!--通过 item. 可以遍历对象内对应的属性-->
			</div>
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:"#app",
				data:{
					objects: [
						{
						    firstName: 'John',
						    lastName: 'Doe',
						    age: 30
						},
						{
						    firstName: 'tom',
						    lastName: 'Jerry',
						    age: 19
						}
					]
				}
			})
		</script>