SOURCE

//条件判断语句
//1、v-if 指令
//代码示例：
//在元素 和 template 中使用 v-if 指令：
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: false,
    ok: true
  }
})
</script>

//2、v-else 指令
//可以使用 v-else 指令给 v-if 指令添加一个 "else" 块。
//随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
	<div v-if="Math.random() > 0.5">
	  Sorry
	</div>
	<div v-else>
	  Not sorry
	</div>
</div>
	
<script>
new Vue({
  el: '#app'
})
</script>

//3、v-else-if 指令
//v-else-if 在 2.1.0 新增，这个用作 v-if 的 else-if 块，可以链式的多次使用。
//判断 type 变量的值：
<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>
//v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

//4、v-show 指令
//可以使用 v-show 指令来根据条件展示元素。
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>