vue3学习笔记之条件渲染

条件渲染

v-if 指令

v-if 指令用于根据表达式的真假来决定是否渲染元素或组件。如果表达式的值为 true，则元素或组件会被渲染到 DOM 中；如果为 false，则元素或组件不会被渲染，甚至不会在 DOM 中存在。

基本用法

<template>
  <div>
    <h1 v-if="isShow">This is a heading</h1>
  </div>
</template>

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

const isShow = ref(true);
</script>

在上述例子中，只有当 isShow 的值为 true 时，<h1> 元素才会被渲染到页面上。

多个元素的条件渲染

你可以使用 <template> 标签来包裹多个元素，并在其上使用 v-if 指令。这样可以根据条件一次性渲染或不渲染多个元素。

<template>
  <div>
    <template v-if="isShow">
      <h1>Heading 1</h1>
      <p>Paragraph 1</p>
    </template>
  </div>
</template>

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

const isShow = ref(true);
</script>

v-else 和 v-else-if

v-else 和 v-else-if 指令可以与 v-if 一起使用，用于创建多个条件分支。

<template>
  <div>
    <h1 v-if="condition === 1">Condition 1</h1>
    <h1 v-else-if="condition === 2">Condition 2</h1>
    <h1 v-else>Other Condition</h1>
  </div>
</template>

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

const condition = ref(2);
</script>

v-show 指令

v-show 指令也用于根据条件显示或隐藏元素，但它与 v-if 不同的是，无论条件真假，元素始终会被渲染到 DOM 中，只是通过 CSS 的 display 属性来控制其显示或隐藏。

基本用法

<template>
  <div>
    <h1 v-show="isShow">This is a heading</h1>
  </div>
</template>

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

const isShow = ref(true);
</script>

在上述例子中，无论 isShow 的值是 true 还是 false，<h1> 元素都会存在于 DOM 中，只是当 isShow 为 false 时，它的 display 属性会被设置为 none，从而在页面上隐藏。

v-if 和 v-show 的区别

• 渲染方式：
  • v-if 是根据条件的真假来决定是否渲染元素，条件为 false 时，元素不会出现在 DOM 中。
  • v-show 则是始终渲染元素，只是通过 CSS 控制其显示或隐藏。
• 性能：
  • v-if 有更高的切换开销，因为它需要在 DOM 中添加或移除元素。
  • v-show 有更高的初始渲染开销，因为它不管条件如何都会渲染元素。
• 使用场景：
  • 当条件在运行时很少改变时，使用 v-if 更合适。
  • 当条件频繁切换时，使用 v-show 更合适。