自学内容网 自学内容网
自学内容网 > 正文

Vue 3 条件渲染与列表渲染完整指南

🕗 发布于 2024-11-16 20:54 vue.js  javascript  前端  前端框架  web  

Vue 3 条件渲染与列表渲染完整指南

在 Vue 3 中，v-if、v-show 和 v-for 是非常常用的指令，帮助我们实现条件渲染和列表渲染。本文将详细介绍这些指令的基本用法、适用场景、常见优化技巧和注意事项。

一、v-if 指令

1. v-if 基本用法

v-if 是一个用于条件渲染的指令，根据表达式的结果决定是否渲染元素。表达式为真时，元素会被渲染；为假时，元素不会被插入到 DOM 中。

<template>
  <button @click="toggle">切换显示</button>
  <p v-if="isVisible">这是一个条件渲染的段落</p>
</template>

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

const isVisible = ref(false);

function toggle() {
  isVisible.value = !isVisible.value;
}
</script>

解释：

  • v-if="isVisible" 控制 p 标签的显示。点击按钮会切换 isVisible 的值，从而决定 p 标签的渲染与否。

2. v-else-if 和 v-else

v-else-if 和 v-else 是和 v-if 一起使用的条件分支。v-else-if 用于添加额外条件，而 v-else 则处理所有未被匹配的情况。

<template>
  <button @click="changeStatus">切换状态</button>
  <p v-if="status === 'loading'">加载中...</p>
  <p v-else-if="status === 'success'">加载成功！</p>
  <p v-else>加载失败，请重试。</p>
</template>

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

const status = ref('loading');

function changeStatus() {
  status.value = status.value === 'loading' ? 'success' : 'error';
}
</script>

解释：

  • status 的值不同会渲染出不同的内容，体现了 v-if、v-else-if 和 v-else 的联合使用方式。

3. v-if 与 v-show 的区别

  • v-if 是真正的条件渲染，不符合条件的元素不会被渲染到 DOM 中；适合用于较少切换的情况。
  • v-show 只是通过 CSS 设置元素的 display 属性来控制显示或隐藏，DOM 元素始终存在于页面中；适合频繁切换的场景。

二、v-show 指令

v-show 通过设置元素的 display 样式来控制显示隐藏。与 v-if 不同的是，v-show 不会动态移除或添加元素，而是直接切换其可见性。

v-show 用法示例

<template>
  <button @click="toggle">切换显示</button>
  <p v-show="isVisible">这是一个 v-show 的段落</p>
</template>

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

const isVisible = ref(false);

function toggle() {
  isVisible.value = !isVisible.value;
}
</script>

解释：

  • v-show="isVisible" 控制 p 标签的显示，通过 CSS 的 display: none 来实现隐藏，适合于需要频繁显示和隐藏的场景。

v-if 和 v-show 的选择

  • v-if 更适合在渲染开销较大的情况下使用，例如列表和复杂组件。
  • v-show 适合需要频繁显示和隐藏的简单元素，因为 v-show 只是通过 CSS 切换可见性。

三、v-for 指令

v-for 用于列表渲染，可以遍历数组或对象并生成对应的元素。它是 Vue 中处理重复数据的强大工具。

1. 基本用法

v-for 使用 item in items 的语法遍历一个数组，并在模板中渲染每个元素。为了提高渲染性能，建议使用 key 属性来唯一标识每个项目。

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

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

const items = ref(['苹果', '香蕉', '橘子']);
</script>

解释：

  • v-for="(item, index) in items" 遍历 items 数组，并将每个元素赋值给 item 变量，同时提供索引 index。

2. 使用 v-for 遍历对象

v-for 也可以用于遍历对象，语法为 (value, key, index) in object。

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

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

const info = ref({
  name: '张三',
  age: 25,
  city: '北京'
});
</script>

解释：

  • v-for="(value, key) in info" 遍历 info 对象，分别将键赋值给 key，值赋值给 value，并生成每个键值对的列表项。

3. v-for 与 v-if 一起使用

当 v-for 与 v-if 同时存在时，v-if 优先级较高。在循环中使用条件判断时，建议放置在循环内部，以避免性能开销。

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

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

const items = ref([
  { id: 1, name: '项目 A', active: true },
  { id: 2, name: '项目 B', active: false },
  { id: 3, name: '项目 C', active: true }
]);
</script>

解释：

  • 仅渲染 active 为 true 的项目，避免不必要的元素渲染以优化性能。

4. v-for 中的 key 属性

key 属性帮助 Vue 更好地追踪元素的变化，提高渲染性能。通常，我们将唯一标识字段（如 id）作为 key 的值。

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

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

const items = ref([
  { id: 1, name: '项目 A' },
  { id: 2, name: '项目 B' },
  { id: 3, name: '项目 C' }
]);
</script>

注意事项：

  • 避免使用索引 index 作为 key，因为数据变化时索引可能会变化，导致重新渲染，影响性能。

四、v-if、v-show 和 v-for 的最佳实践

  1. v-if 与 v-show 的选择：

    • 如果是较少切换且渲染开销大的组件，使用 v-if。
    • 如果是频繁切换的简单元素，使用 v-show。

  2. 避免 v-for 与 v-if 一起使用：

    • 若同时使用 v-for 和 v-if，建议将 v-if 放在 v-for 内部，以减少性能消耗。

  3. 使用 key 优化 v-for：

    • 始终为 v-for 中的元素提供唯一的 key，以帮助 Vue 追踪变化并高效地更新 DOM。

  4. 对象的遍历顺序：

    • 遍历对象时，键的顺序并不保证与对象的声明顺序一致。

总结

本文详细介绍了 Vue 3 中的 v-if、v-show 和 v-for 指令的使用方法、适用场景、常见优化技巧和注意事项。在实际开发中，合理使用这些指令不仅可以提高代码的可读性，还能提升应用性能。掌握这些条件和列表渲染的技巧，可以帮助你更灵活地构建 Vue 应用。

希望本文对你有所帮助，欢迎在评论区留下你的问题与见解！


原文地址：https://blog.csdn.net/2301_79858914/article/details/143795159

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024