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,记得在实践中多尝试,让自己的代码更加高效和优雅!🚀🌈

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/51217.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ctfshow解题方法

171 172 爆库名->爆表名->爆字段名->爆字段值 -1 union select 1,database() ,3 -- //返回数据库名 -1 union select 1,2,group_concat(table_name) from information_schema.tables where table_schema库名 -- //获取数据库里的表名 -1 union select 1,group_concat(…

WebGIS学习——Cesium|Javascript

1.Cesium学习什么&#xff1a;Cesium实战项目说明-CSDN博客 2.Cesium绘制图形(箭头等):Cesium 态势标绘 _cesium态势标绘-CSDN博客 3.CesiumThree集成 4.Cesium深度图相关&#xff1a;Cesium离屏渲染深度图实验_cesium 离屏渲染-CSDN博客 5.洪涝&#xff1a;cesium淹没分析…

Github 2024-07-25 Go开源项目日报 Top10

根据Github Trendings的统计,今日(2024-07-25统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Go项目10Testify - Go代码测试工具包 创建周期:4237 天开发语言:Go协议类型:MIT LicenseStar数量:22206 个Fork数量:1550 次关注人数:222…

TCP连接中的过程状态解析

TCP建立连接三次握手的过程 TCP是一个面向连接的协议&#xff0c;所以在连接双方发送数据之前&#xff0c;都需要首先建立一条连接。 Client连接Server三次握手过程&#xff1a; 当Client端调用socket函数调用时&#xff0c;相当于Client端产生了一个处于Closed状态的套接字…

Python爬虫入门02:Fiddler下载使用教程

文章目录 手机抓包全攻略&#xff1a;Fiddler 工具深度解析引言Fiddler 工具简介为什么选择 Fiddler&#xff1f; 安装与配置 Fiddler步骤一&#xff1a;下载与安装步骤二&#xff1a;配置浏览器代理步骤三&#xff1a;安装 HTTPS 证书 配置手机以使用 Fiddler步骤一&#xff1…

操作系统面试知识点总结5

#来自ウルトラマンメビウス&#xff08;梦比优斯&#xff09; 1 IO管理概述 1.1 I/O 设备 I/O 设备的类型分类。 1.1.1 按使用特性 人机交互类外部设备&#xff0c;例如打印机、显示器等。存储设备&#xff0c;例如磁盘、光盘等。网络通信设备&#xff0c;例如网络接口等。 1…

PHP While循环

PHP 中的 while 循环是一种基本的循环控制结构&#xff0c;它允许你重复执行一段代码块&#xff0c;直到指定的条件不再满足为止。while 循环在需要执行未知次数的代码块时非常有用&#xff0c;特别是当你需要在满足特定条件时继续执行循环时。 基本语法 while (条件表达式) …

21 B端产品经理之技术常识(1)

产品经理需要掌握一些基本的技术知识。 了解公司前端与后端 前端 前端开发&#xff1a;创建WEB页面或APP等前端界面呈现给用户的过程&#xff0c;即前端负责用户界面交互。 前端技能&#xff1a; HTML&#xff1a;一种标记语言&#xff0c;能够实现Web页面并在浏览器中显示。…

【计算机网络】IP地址和子网掩码(IP地址篇)

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️计算机网络】 文章目录 前言IP地址网络地址网络地址的定义与组成作用分类网络地址的分配与管理 广播地址&#xff08;Broadcast Address&#xff09;定义构成类型作用注意事项 广播地址功能 组播地址…

HiveSQL题——炸裂+开窗

一、每个学科的成绩第一名是谁&#xff1f; 0 问题描述 基于学生成绩表输出每个科目的第一名是谁呢&#xff1f; 1 数据准备 with t1 as(selectzs as name,[{"Chinese":80},{"Math":70}],{"English"…

Windows NVM(Node Version Manager)使用指南

Windows NVM&#xff08;Node Version Manager&#xff09;使用指南 引言 Node Version Manager (NVM) 是一个用于管理多个 Node.js 版本的工具&#xff0c;它允许开发者在同一台机器上安装和使用不同版本的 Node.js。虽然 NVM 最初是为 Unix-like 系统设计的&#xff0c;但 …

单链表的基本操作

定义一个结点 typedef struct ElemType{char name[20];int sex;int age;char number[11]; };//定义一个结点 typedef struct Lnode{ ElemType data;struct Lnode* next; }LNode,*LinkList;链表的初始化 一般包含两步&#xff1a;给结点分配空间&#xff0c;头指针指针域…

CompletableFuture使用详解

简单的任务&#xff0c;用Future获取结果还好&#xff0c;但我们并行提交的多个异步任务&#xff0c;往往并不是独立的&#xff0c;很多 时候业务逻辑处理存在串行[依赖]、并行、聚合的关系。如果要我们手动用 Future 实现&#xff0c;是非常麻烦的。 CompletableFutur…

JMeter基本使用

一、JMeter线程组相关 进程&#xff1a;正在运行的程序。线程&#xff1a;是进程中的执行线索。线程组&#xff1a;进程中有许多线程&#xff0c;为了方便管理&#xff0c;可以对线程按照性质分组&#xff0c;分组的结果就是线程组。PS&#xff1a;三者关系&#xff0c;一个进…

Pytest设置日志

在 pytest 中,您可以使用内置的日志功能来记录测试过程中的信息。pytest 默认使用了 logging 模块来处理日志记录。此外,您还可以使用 pytest 的插件来增强日志功能,比如 pytest-loguru 插件,它结合了 loguru 库来提供更强大的日志管理能力。 1. 使用内置的日志功能 设置…

【设计模式】(万字总结)深入理解Java中的创建型设计模式

1. 前言 在软件开发的世界里&#xff0c;设计模式是一种被广泛接受并应用的解决方案。它们不仅仅是代码的设计&#xff0c;更是对问题的思考和解决的方法论。在Java开发中&#xff0c;特别是在面向对象的编程中&#xff0c;设计模式尤为重要。创建型设计模式&#xff0c;作为设…

【初阶数据结构篇】实现顺序结构二叉树(堆的实现方法)

文章目录 实现顺序结构二叉树&#xff08;堆&#xff09;前言代码位置堆的概念与结构概念 堆的实现堆初始化和销毁堆的插入堆的判空堆的删除数据取堆顶数据 实现顺序结构二叉树&#xff08;堆&#xff09; 前言 ​ ⼀般堆使⽤顺序结构的数组来存储数据&#xff0c;堆是⼀种特…

一键生成惊艳图像:使用Stable Diffusion打造惊人视觉效果

一、简介 Stable Diffusion是一种由Stability AI开发的生成式AI模型&#xff0c;能够将文本提示转换为高质量的图像。作为生成式扩散模型的一部分&#xff0c;Stable Diffusion通过解析和理解输入的文本提示&#xff0c;逐步生成与描述相匹配的图像。这一技术不仅在图像生成和…

AUTOSAR从入门到精通-T-Box

目录 前言 算法原理 TBOX主要模块 主控模块 CAN通讯模块 高通4G模块 蓝牙模块 & WIFI & Bluetooth模块 WIFI模块 天线 T-BOX功能 网络接入 车辆信息实时上传 远程诊断 车辆异常告警上传 E/B-call服务 OTA功能 V2X 位置查询/车辆追踪 平台监控/国家监…

树莓派4b的Mysql数据库操作

卸载树莓派中的 MySQL。 停止 MySQL 服务&#xff1a; sudo systemctl stop mysql卸载 MySQL 服务器和客户端&#xff1a; sudo apt-get remove --purge mysql-server mysql-client mysql-common删除 MySQL 数据库和配置文件&#xff1a; sudo rm -rf /etc/mysql /var/lib/mysq…