1.条件判断

1. v-if：用于条件判断的指令。

需求：v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

	<div id='app'>
        <p v-if="seen">现在可以被看到</p>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            seen: false
        }
    })

2. v-else：可以用 v-else 指令给 v-if 添加一个 “else” 块。

随机生成一个数字，判断是否大于0.5，然后输出对应信息。

	<div v-if="Math.random() > 0.5">
        大于 0.5
    </div>
    <div v-else>
        不大于 0.5
    </div>

3. v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用。

	<div id='app'>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else>
            Not A/B
        </div>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            type: 'C'
        }
    })

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

4. v-show：根据条件展示元素。

	<div id='app'>
        <p v-show='ok'>Hello vue!</p>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            ok: true
        }
    })

2、v-if 与 v-show 的区别

1. v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。
2. v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
3. 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if较好。

3. 循环语句

循环使用 v-for指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

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

	<div id='app'>
        <ol>
            <li v-for="site in sites">
                {{site.name}}
            </li>
        </ol>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            sites: [
                {name: '张三'},
                {name: '李四'},
                {name: '王五'},
            ]
        }
    })

2. 模板中使用 v-for

	<div id='app'>
        <ul>
            <template v-for="site in sites">
                <li>{{site.name}}</li>
                <li>------</li>
            </template>
        </ul>
    </div>

3. v-for 迭代对象：v-for 可以通过一个对象的属性来迭代数据

	<div id='app'>
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            object: {
                name: '菜鸟',
                url: 'http://www.xxx.com',
                slogan: '学的不仅是技术，更是梦想！'
            }
        }
    })

4. v-for 迭代对象：也可以提供第二个的参数为键名

	<li v-for="(value, key) in object">
        {{key}} : {{value}}
    </li>

5. v-for 迭代对象：也可以提供第三个的参数为索引

	<li v-for="(value, key, index) in object">
        {{index}} : {{key}} : {{value}}
    </li>

6. v-for 迭代对象：也可以循环整数

	// 输出1-10
	<div id="app">
  		<ul>
    		<li v-for="n in 10">
     		{{ n }}
    	</li>
  		</ul>
	</div>

不积跬步无以至千里 不积小流无以成江海