v-ifv-else-if詳解

一、v-ifv-else-if的基本用法

<template>
  <div>
    <p v-if="isShow">這是v-if的內容</p>
    <p v-else-if="isShow2">這是v-else-if的內容</p>
    <p v-else>這是v-else的內容</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isShow: true,
      isShow2: false
    }
  }
}
</script>

v-ifv-else-if是Vue中條件渲染的常用指令，它們的作用是根據表達式的值的變化來顯示或隱藏DOM元素。

v-ifv-else-if的基本語法是：

<element v-if="condition">...</element>
<element v-else-if="condition2">...</element>
<element v-else>...</element>

其中，如果condition的值為true，則顯示v-if控制的元素，否則不顯示；同理，如果condition2的值為true，則顯示v-else-if控制的元素，否則不顯示；如果前面所有的條件都不滿足，則顯示v-else控制的元素。

二、v-ifv-else-if與v-show的區別

v-ifv-else-if與v-show兩者都能控制元素的顯示與隱藏，但它們的實現方式不同。

首先，v-show的本質是通過CSS的display屬性來控制元素的顯示與隱藏。當顯示條件為true時，給元素添加display屬性為block，否則給元素添加display:none屬性。也就是說，即使元素被隱藏，它的DOM結構還是會被保留，只是簡單的通過CSS的display:none屬性來控制元素的可見性，因此切換複雜度較低，但有可能會影響頁面性能。

相比之下，v-ifv-else-if的工作方式是直接切換DOM元素。當條件為true時，Vue創建管理該元素的DOM，否則銷毀該元素及其子元素。這就造成了v-ifv-else-if切換的複雜度較高，但能夠在切換元素時優化頁面性能。

<template>
  <div>
    <p v-show="isShow">這是v-show的內容</p>
    <p v-if="isShow">這是v-if的內容</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

在上面的例子中，我們通過v-show和v-if來控制相同的元素，它們的區別是：

• v-show通過display屬性來控制元素的顯示與隱藏，元素的DOM結構一直被保留，但是通過CSS的display:none屬性控制元素可見性，有可能會影響頁面性能。
• v-if通過切換DOM元素來控制元素的顯示與隱藏，元素的DOM結構不一定被保留，能夠在切換元素時優化頁面性能，但切換的複雜度較高。

三、v-ifv-else-if的使用案例

v-ifv-else-if不僅僅是簡單的條件渲染，還可以根據不同情況來顯示不同的內容。

1.基礎案例

基礎案例：使用v-ifv-else-if判斷不同的年齡段，並顯示不同的內容。

<template>
  <div>
    <div v-if="age < 18">
      <p>您未成年，禁止入內</p>
    </div>
    <div v-else-if="age >= 18 && age < 60">
      <p>您已成年並且未達到退休年齡，可以正常工作</p>
    </div>
    <div v-else>
      <p>您已退休，可以休息一下了</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      age: 25
    }
  }
}
</script>

2.複雜案例

複雜案例：當滑鼠移動到不同的按鈕上時，顯示不同的提示信息。

<template>
  <div>
    <button @mousemove="setTips('這是按鈕1的提示信息')">按鈕1</button>
    <button @mousemove="setTips('這是按鈕2的提示信息')">按鈕2</button>
    <button @mousemove="setTips('這是按鈕3的提示信息')">按鈕3</button>
    <div v-if="tips">
      {{ tips }}
    </div>
  </div>
</template>
 
<script>
export default {
    data(){
        return {
            tips: ""
        }
    },
    methods: {
        setTips(value){
            this.tips = value;
        }
    }
}
</script>

在上面的例子中，我們用了一個data屬性名為tips來控制提示內容的顯示，當滑鼠移動到不同按鈕上時，通過調用setTips方法設置tips的值，由v-if來控制提示內容的顯示與隱藏。這種方式在需要動態提示信息的場景中非常常用。

3.高級案例：根據不同的列表狀態展示不同的內容

高級案例：根據不同的列表狀態展示不同的內容，如果列表為空則顯示”No Data”，如果列表正在載入中則顯示”Loading…”，如果列表載入完成，但是沒有數據時則顯示”No Data”。

<template>
  <div>
    <ul v-if="isCompleted">
      <li v-for="item in data" :key="item">{{item}}</li>
    </ul>
    <span v-else-if="isLoading">Loading...</span>
    <span v-else>No Data</span>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [],
      isLoading: true,
      isCompleted: false
    }
  },
  created() {
    setTimeout(() => {
       // 模擬非同步請求數據
      if (this.data.length) {
        this.isCompleted = true;
        this.isLoading = false;
      } else {
        this.isLoading = false;
      }
    }, 2000)
  }
}
</script>

在上面的高級案例中，我們用了三個data屬性來控制列表展示的狀態：

• data：列表中的數據。
• isLoading：列表是否正在請求數據的狀態標誌。
• isCompleted：列表請求數據完成後的狀態標誌。

通過v-ifv-else-if來實現列表不同狀態下的展示內容，其中當isLoading為true時，顯示Loading…，當isCompleted為true時，顯示列表內容，否則顯示No Data。這種方式在數據載入過程中需要展現不同狀態下的展示內容時非常實用。

四、總結

v-ifv-else-if是Vue中常用的條件渲染指令，它提供了控制元素顯示與隱藏的功能，同時還能根據不同情況顯示不同的內容。v-ifv-else-if的實現方式是直接切換DOM元素，所以能夠在切換元素時優化頁面性能。但切換的複雜度較高，需要慎重使用。