阅读量:0
📊 Vue 3 实战：v-if 与 v-show 在用户界面切换中的应用
在 Vue.js 中，v-if 和 v-show 是两种常用的条件渲染指令，它们允许我们根据表达式的值来动态地显示或隐藏 DOM 元素。这两种指令虽然看起来相似，但在内部实现和性能方面有所不同。下面我们将通过一个具体的案例来演示如何在 Vue 3 中合理使用 v-if 和 v-show，并探讨它们在实际项目中的应用。
📚 案例背景
假设我们需要构建一个简单的待办事项列表应用，用户可以添加新的待办事项，也可以切换查看已完成的任务或所有任务。为了提高用户体验，我们需要在列表为空时显示不同的提示信息。
🤖 案例分析
我们将通过以下步骤实现上述功能：
- 创建 Vue 3 单文件组件。
- 使用
v-if控制列表的显示与隐藏。 - 使用
v-show控制提示信息的显示与隐藏。 - 使用事件监听器更新状态。
📝 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> 🔍 代码解析
定义数据:
todos: 保存待办事项的数组。completedTodos: 保存已完成任务的数组。viewAll: 用于控制显示全部任务还是已完成任务的布尔值。
模板结构:
- 使用
v-if控制待办事项列表和已完成任务列表的显示/隐藏。 - 使用
v-show控制提示信息的显示/隐藏。 - 使用
v-for渲染列表项。
- 使用
事件处理:
toggleView: 切换视图，显示全部任务或已完成任务。markAsDone: 标记待办事项为已完成，并移动到已完成任务列表。
条件渲染:
v-if用于完全移除元素或添加元素到 DOM 中，适用于切换视图。v-show通过修改元素的 CSSdisplay属性来控制元素的显示或隐藏，适用于提示信息。
🎯 结论
在这个案例中，我们使用了 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，记得在实践中多尝试，让自己的代码更加高效和优雅！🚀🌈
