Vue3学习总结-v-if与v-show的使用案例和区别

Vue 3 实战：v-if 与 v-show 在用户界面切换中的应用

在 Vue.js 中，v-if 和 v-show 是两种常用的条件渲染指令，它们允许我们根据表达式的值来动态地显示或隐藏 DOM 元素。这两种指令虽然看起来相似，但在内部实现和性能方面有所不同。下面我们将通过一个具体的案例来演示如何在 Vue 3 中合理使用 v-if 和 v-show，并探讨它们在实际项目中的应用。

案例背景

假设我们需要构建一个简单的待办事项列表应用，用户可以添加新的待办事项，也可以切换查看已完成的任务或所有任务。为了提高用户体验，我们需要在列表为空时显示不同的提示信息。

案例分析

我们将通过以下步骤实现上述功能：

1. 创建 Vue 3 单文件组件。
2. 使用 v-if 控制列表的显示与隐藏。
3. 使用 v-show 控制提示信息的显示与隐藏。
4. 使用事件监听器更新状态。

Vue 3 代码实现

<template>
  <div id="app">
    <h1>待办事项列表h1>

    
    <button @click="toggleView">切换视图button>

    
    <ul v-if="viewAll">
      <li v-for="(item, index) in todos" :key="index">
        {{ item.text }}
        <button @click="markAsDone(index)">完成button>
      li>
    ul>

    
    <ul v-if="!viewAll">
      <li v-for="(item, index) in completedTodos" :key="index">
        {{ item.text }} (已完成)
      li>
    ul>

    
    <p v-show="todos.length === 0 && viewAll">没有待办事项p>
    <p v-show="completedTodos.length === 0 && !viewAll">没有已完成的任务p>
  div>
template>

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

// 定义数据
const todos = ref([
  { text: '购买牛奶' },
  { text: '完成报告' }
]);
const completedTodos = ref([]);
const viewAll = ref(true);

// 添加新的待办事项
function addTodo(newTodo) {
  todos.value.push({ text: newTodo });
}

// 标记待办事项为已完成
function markAsDone(index) {
  const todo = todos.value.splice(index, 1)[0];
  completedTodos.value.push(todo);
}

// 切换视图
function toggleView() {
  viewAll.value = !viewAll.value;
}
script>

代码解析

1. 定义数据:

   • todos: 保存待办事项的数组。
   • completedTodos: 保存已完成任务的数组。
   • viewAll: 用于控制显示全部任务还是已完成任务的布尔值。

2. 模板结构:

   • 使用 v-if 控制待办事项列表和已完成任务列表的显示/隐藏。
   • 使用 v-show 控制提示信息的显示/隐藏。
   • 使用 v-for 渲染列表项。

3. 事件处理:

   • toggleView: 切换视图，显示全部任务或已完成任务。
   • markAsDone: 标记待办事项为已完成，并移动到已完成任务列表。

4. 条件渲染:

   • v-if 用于完全移除元素或添加元素到 DOM 中，适用于切换视图。
   • v-show 通过修改元素的 CSS display 属性来控制元素的显示或隐藏，适用于提示信息。

结论

在这个案例中，我们使用了 v-if 来控制整个列表的显示与隐藏，因为列表的切换涉及到较大的结构性变化。而使用 v-show 来控制提示信息的显示与隐藏，则是因为提示信息始终存在于 DOM 中，只是根据条件改变其可见性。这种使用方式遵循了 Vue.js 推荐的最佳实践，即对于频繁切换的元素使用 v-show，而对于不经常切换的元素使用 v-if。

通过这个简单的待办事项应用，我们可以看到 v-if 和 v-show 在 Vue 3 中的不同应用场景和性能特点。在实际项目中，根据具体情况选择合适的指令可以提高应用的性能和用户体验。
别忘了给这篇帖子点个赞，如果喜欢的话，也可以收藏，关注我了解更多前端技巧哦！

#Vue3 #v-if和v-show #前端开发

希望这个案例能帮助你更好地理解和使用Vue3的v-if和v-show，记得在实践中多尝试，让自己的代码更加高效和优雅！