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

条件渲染指令

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

		<div id="app">
			<p v-if="msg">msgp>
			<p v-if="info">infop>
		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"> 
			    {{ index }} : {{ key }} : {{ 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">  
				{{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">
				{{index}}:{{item.firstName}}:{{item.lastName}}:{{item.age}}
			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>