Vue v-if v-else详解

小蓝 • 2024-12-21 13:05 • 编程

一、v-if 和 v-else的基本使用

Vue中的v-if和v-else是用于条件性渲染的指令，只有当指定条件为 true 时才会渲染对应的DOM元素。下面的代码演示了v-if和v-else的基本用法：

<template>
  <div v-if="isShow">
    <h3>这是v-if渲染出来的内容</h3>
  </div>
  <div v-else>
    <h3>这是v-else渲染出来的内容</h3>
  </div>
</template>


export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

上面的代码中，通过isShow的值来判断是渲染v-if还是v-else指定的内容。当isShow为true时，渲染v-if指定的内容；当isShow为false时，渲染v-else指定的内容。需要注意的是：v-else必须紧跟在v-if后面，否则会报错。

二、v-if和v-show的区别

虽然v-if和v-show都是用于条件性渲染的指令，但是它们之间存在一些区别。下面是它们之间的区别：

1. 编译时机

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if是惰性的，如果初始条件为false，则什么也不做，只有在条件为true时才会进行初次编译。

而v-show则是“懒惰”的，不管初始条件是什么，它都会在初始渲染时被编译。并且，每次略微开销大一点，因为它需要在切换时切换 CSS 样式。一般来说，v-if更适合在运行时很少改变条件，不需要频繁切换的场景；v-show则更适合需要非常频繁切换的场景。

2. 性能消耗

v-if是惰性的，如果初始条件为false，则什么也不做，只有在条件为true时才会初次编译和挂载，这样可以节约一些初次渲染的性能；

v-show则是一直在页面上，只是在CSS中进行隐藏，所以在切换过程中不需要像v-if那样创建和销毁元素，所以虽然v-show在初始渲染时会和$v-if有一点性能损失，但是在频繁切换时，v-show的性能更高。

三、v-if和v-for的使用

v-if和v-for是经常一起使用的。下面是一个示例代码，用来说明如何在v-for循环内部使用v-if：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <div v-if="item.checked">{{ item.name }}</div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Vue', checked: true },
        { name: 'React', checked: true },
        { name: 'Angular', checked: false },
      ],
    };
  },
};
</script>

在上面的代码中，使用了v-for遍历list数组，然后使用v-if判断item.checked的值，如果为true，则渲染出item.name。

四、使用v-if和v-else-if和v-else进行多重判断

有时候，我们需要根据不同的条件渲染不同的内容，这时候就需要使用v-else-if指令了。

<template>
  <div>
    <div v-if="type === 'A'">A类型的内容</div>
    <div v-else-if="type === 'B'">B类型的内容</div>
    <div v-else>其他类型的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A',
    };
  },
};
</script>

在上面的代码中，使用了v-if, v-else-if和v-else指令对type的值进行了多重判断。当type的值为’A’时，渲染”A类型的内容”；当type的值为’B’时，渲染”B类型的内容”；当type的值为其他内容时，渲染”其他类型的内容”。

五、v-if和v-show的语法糖

在Vue 2.5.0及以上版本中，还提供了一种新写法来使用v-if和v-show指令，称为“语法糖”。

1. v-if语法糖：

<template>
  <div v-if="name">Hello {{ name }}!</div>
</template>

可以使用下面这种写法来代替上面的代码：

<template>
  <div v-if="name">{{`Hello ${name}!`}}</div>
</template>

使用${}来代替 {{ }}，并且使用“来代替””。

2. v-show语法糖：

<template>
  <div v-show="isShow">Hello world!</div>
</template>