跟着网上学Vue之条件和循环

条件判断

1. v-if

直接上例子！（body标签内）

<script type="text/javascript" src="js/vue.js"></script>
		
		<div id="test">
			<span v-if="ok">这里有一些水果：</span>
			<template v-if="check">
				<p>苹果</p>
				<p>香蕉</p>
				<p>雪梨</p>
			</template>
			</div>
			<script type="text/javascript">
				new Vue({
					el:'#test',
					data:{
						ok:true,
						check:true
					}
				});
			</script>
		

结果可直接复制运行测试

2. v-else

直接上代码，在上面的基础上就加上一句

<span v-if="ok">这里有一些水果：</span>
	<span v-else>这里没有水果</span>
	<template v-if="check">
		<p>苹果</p>
		<p>香蕉</p>
		<p>雪梨</p>
	</template>

3. v-else-if

直接上代码

<div id="test">
			<span v-if="check=='A'">100</span>
			<span v-else-if="check=='B'">90</span>
			<span v-else-if="check=='C'">80</span>
			<span v-else-if="check=='D'">70</span>
			<span v-else>60</span>
			
			</div>
			<script type="text/javascript">
				new Vue({
					el:'#test',
					data:{
						ok:true,
						check:'A'
					}
				});
			</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

4. v-show

<div id="test">
			<span v-if="check=='A'">100</span>
			<span v-else-if="check=='B'">90</span>
			<span v-else-if="check=='C'">80</span>
			<span v-else-if="check=='D'">70</span>
			<span v-else>60</span>
			<p v-show="ok">我在这里</p>
			</div>
			<script type="text/javascript">
				new Vue({
					el:'#test',
					data:{
						ok:true,
						check:'A'
					}
				});
			</script><div id="test">
		
			<p v-show="ok">我在这里</p>
			</div>
			<script type="text/javascript">
				new Vue({
					el:'#test',
					data:{
						ok:true,
						check:'A'
					}
				});
			</script>

循环

循环使用 v-for 指令。

1. 形式一v-for="todo in todos"（单标签）
   v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			<ul>
				<li v-for="todo in todos">
					{{todo.text}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el:'#test',
				data:{
					todos:[{text:'Jafe'},
						{text:'Charlotte'},
						{text:'哈哈哈'}]
				}
			});
		</script>

效果图：

2. 形式二v-for="todo in todos"（块标签）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			<ul>
			<div v-for="todo in todos">
				<li >
					{{todo.text}}
				</li>
				<li>
					--------------------
				</li>
				</div>
			</ul>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el:'#test',
				data:{
					todos:[{text:'Jafe'},
						{text:'Charlotte'},
						{text:'哈哈哈'}]
				}
			});
		</script>

效果图：

3. 形式三todo in todos（整个对象）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			<ul>
			<div v-for="todo in todos">
				<li >
					{{todo}}
				</li>
				<li>
					-----分割线--------
				</li>
				</div>
			</ul>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el:'#test',
				data:{
					todos:{
						text:'Jafe',
						number:123,
						age:22
					}
				}
			});
		</script>

效果图：

4.形式四v-for="(todo,key) in todos"（值，键）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			<ul>
			<div v-for="(todo,key) in todos">
				<li >
					{{key}}:{{todo}}
				</li>
				<li>
					-----分割线--------
				</li>
				</div>
			</ul>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el:'#test',
				data:{
					todos:{
						text:'Jafe',
						number:123,
						age:22
					}
				}
			});
		</script>

效果图：

5. 形式五v-for="(todo,key,index) in todos"（值，键，索引）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			<ul>
			<div v-for="(todo,key,index) in todos">
				<li >
					{{index}}:{{key}}:{{todo}}
				</li>
				<li>
					-----分割线--------
				</li>
				</div>
			</ul>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el:'#test',
				data:{
					todos:{
						text:'Jafe',
						number:123,
						age:22
					}
				}
			});
		</script>

效果图：

6. 形式六v-for="site in 10"（常数形式）

<script type="text/javascript" src="js/vue.js"></script>
		
		<div id="test">
			<ul>
				<li v-for="site in 10">
					这是第{{site}}个
				</li>
			</ul>
			</div>
			<script type="text/javascript">
				new Vue({
					el:'#test'
				});
			</script> 

效果图：