###### tags:`Vue`
# 4.Vue v-if 模板判斷

1. <kbd>v-if</kbd> 搭配 <kbd>v-else</kbd>使用切換物件呈現,與三種寫法之一
2. <kbd>v-if</kbd> 搭配 <kbd>v-else</kbd>三種寫法(2)(3)
3. 使用<kbd> v-else-if </kbd>做分頁頁籤
4. <kbd>v-if</kbd>和<kbd>v-show</kbd>差異

### 1.<kbd>v-if</kbd> 搭配 <kbd>v-else</kbd>使用切換物件呈現,與三種寫法之一

<div id="app">

<div class="alert alert-success col-6" v-if="isSuccess == true">成功</div>
<div class="alert alert-danger col-6" v-if="isSuccess == false"> 失敗</div>
  <div class="form-group form-check ml-3" >
    <input type="checkbox" class="form-check-input" 
    id="isSuccess" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess">Check me out</label>
  </div>

</div>



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

### 2-1 <kbd>v-if</kbd> 搭配 <kbd>v-else</kbd>三種寫法(2)
為了使寫法更精簡 可以參考以下寫法 使用<kbd>!</kbd>**驚嘆號**,表反面意思.

<div class="alert alert-success col-6" v-if="open">成功</div>
<div class="alert alert-danger col-6" v-if="!open"> 失敗</div>
  <div class="form-group form-check ml-3" >
    <input type="checkbox" class="form-check-input" id="open" v-model="open">
    <label class="form-check-label" for="isSuccess2">Check me out</label>
  </div>
 
 
  var app = new Vue({
  el: '#app',
  data: {
   open: 'true',
  }
})

### 2-1 <kbd>v-if</kbd> 搭配 <kbd>v-else</kbd>三種寫法(3)

<div class="alert alert-success col-6" v-if="light">成功</div>
<div class="alert alert-danger col-6" v-else > 失敗</div>
  <div class="form-group form-check ml-3" >
    <input type="checkbox" class="form-check-input" id="light" v-model="light">
    <label class="form-check-label" for="light">Check me out</label>
  </div>
  
  var app = new Vue({
  el: '#app',
  data: {

    light:'true'
  }
});

### 3.使用v-else-if做分頁頁籤
此部分使用<kbd>v-on:some_method </kbd> ( 簡寫<kbd>@some_method</kbd> ) 、 <Kbd>@click.prevent</Kbd>、<Kbd>v-bind:class="{ active: isActive }</Kbd>

1.nav 綁定 click, <kbd>v-on:click"link='a'"</kbd> 依序把三個頁面標示完成.
2.在JS data 預設 <kbd>link: 'a',</kbd>
3.在HTML裡的content部分標上<kbd>v-if="link == 'a' "</kbd>其他頁面標示<kbd>v-else-if="link =='b'"</kbd>等等依序把其他頁面標完成.[v-else&v-else-if差別](https://cn.vuejs.org/v2/api/#v-else-if),網路上和我所買的六角教學影片都沒有講得太清楚.老師說<kbd>v-else-if</kbd>條件認定比較模糊,多個要判斷,搭配<kbd>v-if</kbd>會依序判斷.不管<kbd>v-else</kbd>或是<kbd>v-else-if</kbd>都要放在<kbd>v-if</kbd>後面才能跑得動.
4.最好在nav標籤上補上class條件,<kbd>v-bind:class="{'active':link == 'a' }"</kbd>依序把其他標籤完成.

<div id="app">

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link" href="#" @click.prevent="link = 'a' " 
      v-bind:class="{'active':link == 'a' }">標題一</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" @click.prevent="link = 'b' " 
      v-bind:class="{'active':link == 'b' }">標題二</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" @click.prevent="link = 'c' " 
      v-bind:class="{'active':link == 'c' }">標題三</a>
    </li>
  </ul>
  <div class="content">
    <div v-if="link == 'a' ">Ａ</div>
    <div v-else-if="link =='b'">Ｂ</div>
    <div v-else-if="link =='c'">Ｃ</div>
  </div>


</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
   
    link: 'a',

  },
  
});

</script>

### <kbd>v-if</kbd>和<kbd>v-show</kbd>差異
<kbd>v-show</kbd>是透過<kbd>display:none</kbd>方式隱藏Dom元素,
而<kbd>v-if</kbd>是將Dom元素移除掉.