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

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

在 Vue.js 中,v-ifv-show 是两种常用的条件渲染指令,它们允许我们根据表达式的值来动态地显示或隐藏 DOM 元素。这两种指令虽然看起来相似,但在内部实现和性能方面有所不同。下面我们将通过一个具体的案例来演示如何在 Vue 3 中合理使用 v-ifv-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-ifv-show 在 Vue 3 中的不同应用场景和性能特点。在实际项目中,根据具体情况选择合适的指令可以提高应用的性能和用户体验。
别忘了给这篇帖子点个赞,如果喜欢的话,也可以收藏,关注我了解更多前端技巧哦!

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

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

你可能感兴趣的:(前端Vue3,学习,vue.js,前端,前端框架)