iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手初探 Vue系列 第 13

鐵人賽Day13 - v-if 使用細節

在前面提到 v-if 都是搭配 v-for 來做使用,但 v-if 也可以單獨的做使用
一樣先給 Vue 的架構和資料:

<script>
var app = new Vue({
  el: '#app',
  data: {
    isSuccess: true,
    showTemplate: true,
    link: 'a',
    loginType: 'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
});
</script>

接著就來基本的使用 v-if,我們有兩個元件,分別可以跟著 inputcheckbox 的勾選,來呈現不同的元件
isSuccess 的資料狀態為 true 就出現成功,為 false 就出現失敗,這時候 .alert 元素都綁著 v-if 的指令
判斷式就是 isSuccess 這個資料狀態,而 inputcheckbox 綁著 isSuccess 隨著勾選會切換資料狀態

  <div class="alert alert-success" v-if="isSuccess">成功!</div>
  <div class="alert alert-danger" v-if="!isSuccess">失敗!</div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="isSuccess" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess">啟用元素狀態</label>
  </div>

JS 裡面 if 判斷式常常搭配 else 來做使用,所以在 Vue 裡面當然也有 v-else 這個指令
所以在上面的程式碼,我們可以把﹝失敗的元件﹞改為 v-else,如下:

  <div class="alert alert-success" v-if="isSuccess">成功!</div>
  <div class="alert alert-danger" v-else>失敗!</div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="isSuccess" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess">啟用元素狀態</label>
  </div>

兩種寫法都是一樣的

當然,我們也可以搭配 <template> 來做使用
舉一種情境,假設我們的表格資料,都要隨著 checkbox 的勾選來顯示或隱藏,這樣我們勢必就要在每個 <tr> 內下 v-if 的判斷式,假設有很多 <tr> 呢? 那是不是太累了?

  <table class="table">
    <thead>
      <th>編號</th>
      <th>姓名</th>
    </thead>
      <tr v-if="showTemplate">
        <td>1</td>
        <td>安妮</td>
      </tr>
      <tr v-if="showTemplate">
        <td>2</td>
        <td>小明</td>
      </tr>
  </table>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="showTemplate" v-model="showTemplate">
    <label class="form-check-label" for="showTemplate">啟用元素狀態</label>
  </div>

這時候就可以使用 <template> 了,使用之後寫法會如下
v-if 的指令只需要下在 <template> 內,而 <template> 是不會被輸出的

  <table class="table">
    <thead>
      <th>編號</th>
      <th>姓名</th>
    </thead>
    <template v-if="showTemplate">
      <tr>
        <td>1</td>
        <td>安妮</td>
      </tr>
      <tr>
        <td>2</td>
        <td>小明</td>
      </tr>
    </template>
  </table>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="showTemplate" v-model="showTemplate">
    <label class="form-check-label" for="showTemplate">啟用元素狀態</label>
  </div>

接下來,我們來做頁籤切換內容的功能,如下:

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

比較不一樣的是多了 v-else-if 這個指令,這個就等於 JS 內的 else if,而顯示跟隱藏的方式,我們是採用 link 這個字串資料內容

再來講一講 v-ifv-show 的差別,在第一個例子的時候我們可以改成 v-show

  <div class="alert alert-success" v-show="isSuccess">成功!</div>
  <div class="alert alert-danger" v-show="!isSuccess">失敗!</div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="isSuccess" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess">啟用元素狀態</label>
  </div>

會發現結果是一樣的,但相較於 v-if
v-show 是採用 display 的屬性來做元素的隱藏跟顯示,亦即資料狀態為 true 時,displayblock,資料狀態為 false 時,displaynone
v-if 在資料狀態改變時,是採用移除 DOM 元素的方式
以上就是兩者的差異性


上一篇
鐵人賽Day12 - v-for 使用細節
下一篇
鐵人賽Day14 - Computed & Watch
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言