条件渲染

0 前言

我们前面学习了列表渲染，可以批量渲染大量的组件，是不是贼牛皮！

而现在我们要学习另一个渲染，条件渲染。

条件渲染很高级，也贼好用，可以快速实现对页面组件的显示和隐藏。

1 语法

条件渲染通常使用 v-if、v-else-if ， v-else ，v-show 来实现。

我们先将前面三个分别表示，

v-if：根据表达式的真假值来决定是否渲染元素。
v-else-if：在前一个 v-if 或 v-else-if 不满足条件时，判断新的条件是否为真。
v-else：当前面的 v-if 和 v-else-if 都不为真时，渲染该元素。

上面逻辑一套一套的，有点难懂，我们直接看示例。

2 v-if示例

语法如下

v-if="表达式"，
当表达式为真时，显示；当表达式为假时，隐藏。

可以看下面的示例

<template>
  <div>
    <p v-if="isShowing">要显示的内容</p>
    <button @click="toggleDisplay">切换显示状态</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isShowing = ref(true);

const toggleDisplay = () => {
  isShowing.value = !isShowing.value;
};
</script>

效果如下，

我们看关键代码，

<p v-if="isShowing">要显示的内容</p>

通过给标签添加v-if语句，实现对p标签的控制，当isShowing响应式变量为true的时候，显示，为false的时候隐藏。

3 v-if 、v-else示例

比较复杂，我们直接看示例

<template>
  <div>
    <p v-if="isShowing">要显示的内容</p>
    <p v-else>要隐藏的内容</p>
    <button @click="toggleDisplay">切换显示状态</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isShowing = ref(true);

const toggleDisplay = () => {
  isShowing.value = !isShowing.value;
};
</script>

效果如下，

我们看关键代码

    <p v-if="isShowing">要显示的内容</p>
    <p v-else>要隐藏的内容</p>

当isShowing为true时，显示”要显示的内容”，当isShowing不返回true的时候，就会显示v-else的值，显示”要隐藏的内容”。

而这里用的是p标签，但是v-if还可以用于div等各种标签。

这个是简单的，我们再加一个难度。

4 v-if 、v-else-if ,v-else示例

OK，老规矩，我们直接上示例

<template>
  <div>
    <p v-if="status === 'active'">活动状态</p>
    <p v-else-if="status === 'inactive'">非活动状态</p>
    <p v-else>未知状态</p>
    <button @click="toggleStatus">切换状态</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const status = ref('active');

const toggleStatus = () => {
  if (status.value === 'active') {
    status.value = 'inactive';
  } else if (status.value === 'inactive') {
    status.value = 'unknown';
  } else {
    status.value = 'active';
  }
};
</script>

效果如下

我们看内容

    <p v-if="status === 'active'">活动状态</p>
    <p v-else-if="status === 'inactive'">非活动状态</p>
    <p v-else>未知状态</p>

页面首先会判断v-if的式子是否成立，当status等于active的时候，就会显示活动状态，当v-if中的式子不成立；页面会判断v-else-if的式子是否成立，当status等于inactive的时候，就会显示非活动状态；而当上面两个判断都不成立的时候，就会直接显示v-else的值。

但是v-if三个提供了很高的灵活性，能做各种复杂的组合，但是当公式不成立的时候，页面会销毁对应的页面，当成立的时候，会重新渲染对应的页面，十分占用性能。

而新的语法v-show可以解决性能问题，我们继续看。

5 v-show

v-show的语法是

v-show="表达式"
当表达式结果为true的时候，显示组件
当表达式结果为true的时候，隐藏组件

我们直接看示例

<template>
  <div>
    <p v-show="isShowing">要显示的内容</p>
    <p>这段文字始终显示</p>
    <button @click="toggleDisplay">切换显示状态</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isShowing = ref(true);

const toggleDisplay = () => {
  isShowing.value = !isShowing.value;
};
</script>

效果如下，

可以看到通过v-show实现对”要显示的内容”的控制。

而且他最好的点是，他只是隐藏组件，并不是销毁，所以性能消耗不高。

6 结语

通过v-if、v-else-if、v-else、v-show实现高效快速的控制页面的显示和隐藏，语法更加简洁好用。

而在我们掌握了对单个页面的操作之后，我们可以更进一步，学习如何进行多个页面之间的联动啦！

少年，你又距离世界的真相更进一步了！