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元素，所以能够在切换元素时优化页面性能。但切换的复杂度较高，需要慎重使用。