当前位置：首页 > article >正文

Vue3 学习笔记（九）条件渲染详解

article 2025/2/28 15:33:02

在这里插入图片描述

Vue.js 提供了几种指令来实现条件渲染，即根据某些条件决定是否渲染一块内容。这些指令包括 v-if、v-else-if、v-else 和 v-show。下面详细解释这些指令的用法和区别。

一、条件渲染

1、`v-if` 、`v-else-if` 和 `v-else`

v-if 是最常用的条件渲染指令，它只会在指令的表达式为真（true）时渲染元素。

v-else-if 和 v-else 与 v-if 配合使用，用于处理多个条件分支。

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

const type = ref('admin')
</script>

<template>

    <p v-if="type === 'admin'">欢迎管理员</p>
    <p v-else-if="type === 'user'">欢迎用户</p>
    <p v-else>欢迎游客</p>
		
</template>

在这个例子中，根据 type 的值，将渲染不同的 <p> 元素。v-else-if 可以有多个，而 v-else 只能有一个，并且必须放在最后。

当 type 值为 admin 输出内容：
在这里插入图片描述

当 type 值为 user 输出内容：

在这里插入图片描述

当 type 值为 1 输出内容：
在这里插入图片描述

2、`v-show`

与 v-if 不同，v-show 不会条件性地渲染元素，而是简单地切换元素的 CSS display 属性。

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


const showTitle = ref(true);

</script>

<template>
 <div>
    <h1 v-show="showTitle">标题</h1>
  </div>
</template>

在这个例子中，无论 showTitle 的值如何，<h1> 元素都会被渲染，但它的显示与否取决于 display 属性的值。

差异和选择

v-if 是真正的条件渲染，它会确保在条件为假时，元素不会被渲染到 DOM 中，因此不会占用资源。
v-show 只是简单地切换元素的显示状态，无论条件如何，元素都会被渲染，但可能对性能有影响，特别是当元素复杂或数量较多时。
使用场景：如果需要频繁切换元素的显示状态，且元素本身不复杂，可以使用 v-show。如果渲染的元素复杂或条件不经常变化，建议使用 v-if。

3、 `<template>` 上的 v-if

（1）、基本用法

在 Vue.js 中，<template> 标签上的 v-if 指令用于条件性地渲染模板内容。当 v-if 的表达式结果为真（true）时，包裹在 <template> 标签内的内容将被渲染到 DOM 中；当表达式结果为假（false）时，内容将不会被渲染。

<template> 标签本身不会在 DOM 中产生任何实际的元素，它仅作为 Vue 编译器的一个指令容器使用。这意味着你可以在 <template> 标签内使用 v-if 来条件性地渲染多个元素，而不用担心在 DOM 中创建额外的节点。

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

const condition = ref(true)
</script>

<template>
  <div>
    <template v-if="condition">
      <p>这段内容只有在 condition 为 true 时才会显示。</p>
      <p>这又是一个段落。</p>
    </template>
  </div>
</template>

在这个例子中，只有当 condition 的值为 true 时，两个 <p> 元素才会被渲染。

显示效果如下：
在这里插入图片描述

(2)、与 v-for 一起使用

<template> 标签上的 v-if 也可以与 v-for 一起使用，来条件性地渲染列表中的每个项目。

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


const items = ref([
      { id: 1, text: 'Item 1', isVisible: true },
      { id: 2, text: 'Item 2', isVisible: false },
      { id: 3, text: 'Item 3', isVisible: true }
    ]);


</script>

<template>
	<ul>
    <template v-for="item in items" :key="item.id">
      <li v-if="item.isVisible">
        {{ item.text }}
      </li>
    </template>
  </ul>
</template>

在这个例子中，v-for 用于遍历 items 数组，而 v-if 用于决定是否渲染每个列表项。

显示效果如下：

在这里插入图片描述

注意事项

<template> 标签上的 v-if 会影响其内部所有内容的渲染，包括多个元素。
当 <template> 与 v-for 一起使用时，v-if 应该放在 v-for 之后，以确保条件判断是在循环的每个迭代中进行的。
使用 <template> 标签可以避免在 DOM 中创建不必要的节点，这对于性能优化是有益的。

通过使用 <template> 标签上的 v-if，你可以更灵活地控制复杂模板的渲染逻辑，同时保持模板的整洁和组织性。

4、v-for 详解

v-for 是 Vue.js 中的一个指令，用于基于源数据多次渲染一个元素或模板块。它是一个强大的工具，允许你为数组中的每个元素生成对应的 HTML 代码。

（1）、基本用法

v-for 可以接受数组或对象作为源数据，并为每个元素或属性创建一个元素。

当你使用数组作为 v-for 的源数据时，你可以像这样遍历数组：

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


 const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' }
    ]);
		
</script>


<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

在这个例子中，v-for 遍历 items 数组，并为每个对象创建一个 <li> 元素。:key 是一个推荐的属性，用于提供每个列表项的唯一键值，这有助于 Vue 优化渲染性能。

在这里插入图片描述

（2 ）、对象

也可以使用对象作为 v-for 的源数据：

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


const object = ref({
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    });
		
</script>


<template>
  <ul>
    <li v-for="(value, key, index) in object" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
</template>

在这个例子中，v-for 遍历 object 对象，并为每个属性创建一个 <li> 元素。解构赋值被用来同时获取键、值和索引。

显示结果：

在这里插入图片描述

（3）、`v-for` 与 `v-if` 的区别

v-for 用于渲染列表，它更适合处理数组或对象的迭代。
v-if 用于条件渲染，它更适合处理基于条件的元素显示或隐藏。

（4）、使用 `v-for` 时的注意事项

性能：使用 v-for 时，确保为每个列表项提供一个唯一的 key 属性，这有助于 Vue 识别和重用元素，从而提高渲染性能。
避免副作用：在 v-for 遍历的元素内部，尽量避免执行可能会产生副作用的操作，如更改数组的长度。
避免使用索引作为 key：索引可能会在数组变化时改变，使用索引作为 key 可能会导致性能问题和不一致的行为。
使用 track-by：在使用 Vue 3 的 <script setup> 语法时，可以使用 track-by 来指定如何跟踪每个列表项的唯一性。
组件内的 v-for：当在组件内使用 v-for 时，确保使用 item 和 index 作为属性传递给组件。
响应式数据：确保作为 v-for 源数据的数组或对象是响应式的，这样 Vue 才能检测到数据的变化并更新 DOM。