当前位置： 首页 > news >正文

Vue入门-指令学习-v-show和v-if

news 2026/2/9 11:44:57

v-show：

作用：控制元素的显示隐藏

语法：v-show="表达式" 表达式值true显示，false隐藏

v-if

作用：控制元素的显示隐藏（条件渲染）

语法： v=if="表达式" 表达式true显示，false隐藏

注意：

v-show和v-if效果上一样，但是底层原理不同，v-show是通过切换css的display：none属性来显示隐藏，而v-if则是根据判断条件控制元素的创建和移除

v-show更适合需要频繁切换显示隐藏场景的情况

v-if更适合条件渲染

使用demo描述

demo：

参数全为true

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> --><style>.box {border: 2px solid black;width: 500px;height: 400px;margin-top: 10px;}</style>
</head><body><div id="app"><div v-show="flag" class="box">v-show控制的盒子</div><div v-if="flag" class="box">v-if控制的盒子</div></div><script src="js/vue.js"></script><script>const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',//通过data提供数据data: {flag: true}})</script>
</body></html>

页面效果：

v-show和v-if全部都显示

页面检查中能看到俩条对应的代码

<div v-show="flag" class="box">v-show控制的盒子</div>
<div v-if="flag" class="box">v-if控制的盒子</div>

将true改成false后的页面效果

页面检查中只能看到v-show的代码，看不到v-if的代码

<div v-show="flag" class="box">v-show控制的盒子</div>
<!---->

相关文章：

Vue入门-指令学习-v-show和v-if

v-show&#xff1a; 作用&#xff1a;控制元素的显示隐藏 语法&#xff1a;v-show"表达式" 表达式值true显示&#xff0c;false隐藏 v-if 作用&#xff1a;控制元素的显示隐藏&#xff08;条件渲染&#xff09; 语法&#xff1a; vif"表达式" 表达式tr…...

编程日记 2024/10/10 3:25:51

nacos多数据源插件介绍以及使用

概述 在微服务架构中&#xff0c;服务配置的集中管理和动态调整是至关重要的。Nacos 提供了配置管理和服务发现的功能&#xff0c;其中配置管理支持动态数据源的切换&#xff0c;增强了其在复杂环境中的适用性。默认情况下&#xff0c;Nacos 支持 MySQL 和Derby&#xff0c;但…...

编程日记 2024/10/10 3:24:50

国庆档不太热，影视股“凉”了？

今年国庆档票房止步21亿元&#xff0c;属实有点差强人意。 根据国家电影局统计&#xff0c;2024年国庆档&#xff08;2024年10月1日至7日&#xff09;全国电影票房为21.04亿元&#xff0c;观影人次为5209万&#xff0c;总票房成绩、观影总人次同比均有所下滑。 作为传统观影高…...

编程日记 2024/10/10 3:23:48

QtDesign预览的效果与程序运行的结果不一致的解决方法

存在的问题 使用Qt designer软件设计出来的界面&#xff0c;与转换成python程序运行出来的结果不一致&#xff0c;具体看下图 Qt designer预览结果 程序运行出来的结果 原因分析 我自己的电脑是2560*1600分辨率的屏幕&#xff0c;采用的是200%的缩放比例&#xff0c;出现这种…...

编程日记 2024/10/10 3:20:44

模运算和快速幂

文章目录 模运算快速幂 模运算 模运算是大数运算中的常用操作。如果一个数太大&#xff0c;无法直接输出&#xff0c;或者不需要直接输出&#xff0c;则可以对它取模&#xff0c;缩小数值再输出。取模可以防止溢出&#xff0c;这是常见的操作。 取模运算一般要求a和m的符号一…...

编程日记 2024/10/10 3:19:41

【机器学习】——神经网络与深度学习：从基础到应用

文章目录 神经网络基础什么是神经网络&#xff1f;神经网络的基本结构激活函数 深度学习概述什么是深度学习&#xff1f;常见的深度学习算法 深度学习的工作流程深度学习的实际应用结论 引言 近年来&#xff0c;神经网络和深度学习逐渐成为人工智能的核心驱动力。这类模型模仿人…...

编程日记 2024/10/10 3:17:40

Unity各个操作功能+基本游戏物体创建与编辑+Unity场景概念及文件导入导出

各个操作功能 部分功能 几种操作游戏物体的方式&#xff1a; Center:有游戏物体父子关系的时候&#xff0c;中心点位置 Global/Local:世界坐标系方向/自身坐标系方向 &#xff1a;调试/暂停/下一帧 快捷键 1.Alt鼠标左键&#xff1a;可以实现巡游角度查看场景 2.鼠标滚轮…...

编程日记 2024/10/10 3:16:39

QT入门教程攻略 QT入门游戏设计：贪吃蛇实现 QT全攻略心得总结

Qt游戏设计&#xff1a;贪吃蛇 游戏简介 贪吃蛇是一款经典的休闲益智类游戏&#xff0c;玩家通过控制蛇的移动来吃掉地图上的食物&#xff0c;使蛇的身体变长。随着游戏的进行&#xff0c;蛇的移动速度会逐渐加快&#xff0c;难度也随之增加。当蛇撞到墙壁或自己的身体时&…...

编程日记 2024/10/10 3:15:38

Linux No space left on device分析和解决

报错解释&#xff1a; "No space left on device" 错误表示你的Linux设备&#xff08;通常是磁盘分区&#xff09;上没有剩余空间了。这可能是因为磁盘已满&#xff0c;或者inode已满。磁盘空间是指磁盘上的实际空间&#xff0c;而inode是用来存储文件元数据的数据结…...

编程日记 2024/10/10 3:14:37

Qt实现Halcon窗口显示当前图片坐标

一、前言 Halcon加载图片的窗口&#xff0c;不仅能放大和缩小图片&#xff0c;还可以按住Ctrl键显示鼠标下的灰度值&#xff0c;这种方式很方便我们分析缺陷的灰度和对比度。 二、实现方式 ① 创建显示坐标和灰度的widget窗口 下图的是widget部件&#xff0c;使用了4个label控…...

编程日记 2024/10/10 3:13:35

构建宠物咖啡馆：SpringBoot框架的实现策略

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理基于Spring Boot的宠物咖啡馆平台的设计与…...

编程日记 2024/10/10 3:12:34

Qt开发环境的搭建

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Qt开发环境的搭建 收录于专栏【Qt开发】 本专栏旨在分享学习Qt的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. Qt开发工具概述 Qt…...

编程日记 2024/10/10 3:09:31

docker-compose查看容器日志和实时查看日志

要查看 docker-compose up 过程中容器启动的错误日志&#xff0c;可以使用以下方法&#xff1a; ### 1. **使用 docker-compose logs 命令** 1. 在终端中进入包含 docker-compose.yml 文件的目录。 2. 运行以下命令来查看所有容器的日志&#xff1a; bash docker-compose…...

编程日记 2024/10/10 3:06:28

MVC、MVP和MVVM之间的区别

MVC&#xff08;Model-View-Controller&#xff09;隔开业务和UI&#xff08;一对一&#xff09; 角色划分&#xff1a; Model&#xff1a;负责处理数据和业务逻辑&#xff0c;通常包括数据的存储、检索和更新等操作。 View&#xff1a;负责展示用户界面&#xff0c;接收用户输…...

编程日记 2024/10/10 3:05:27

uni-app 打包成app时 限制web-view大小

今天对接一个uni-app的app 内置对方h5 web-view的形式 需要对方在web-view顶部加点东西 对方打的app的web-view始终是全屏的状态，对方表示做不到我要的效果 emmmmmm。。。。。。 于是乎 自己搭了个demo 本地h5跑起来审查了下代码，发现web-view是给绝对定位了 于是乎 我想外层…...

编程日记 2024/10/10 3:03:24

智能指针(2)

目录 答题格式&#xff1a; 几个易错点 可能问法四&#xff1a; 问题分析&#xff1a; 问题解答&#xff1a; 上回文说到&#xff0c;weak_ptr的功能和区别&#xff0c;并且进行了分析&#xff0c;我们接着进行解答。 答题格式&#xff1a; int main() { std::we…...

编程日记 2024/10/10 3:01:22

[含文档+PPT+源码等]精品基于Nodejs实现的家教服务小程序的设计与实现

基于Node.js实现的家教服务小程序的设计与实现背景&#xff0c;主要源于以下几个方面&#xff1a; 一、家教市场的现状与需求 随着教育竞争的日益激烈&#xff0c;家庭对子女教育质量的重视程度不断提升&#xff0c;家教服务已成为许多家庭不可或缺的一部分。然而&#xff0c…...

编程日记 2024/10/10 3:00:21

electron打包报错-winCodeSign无法下载

electron打包报错-winCodeSign下载问题 问题描述 downloaded urlhttps://registry.npmmirror.com/-/binary/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration1.577s⨯ cannot execute causeexit status 2outerrorOutERROR: Cannot create s…...

编程日记 2024/10/10 2:55:15

给Windows系统设置代理的操作方法

一、什么是代理 网络代理是一种特殊的网络服务&#xff0c;允许一个网络终端通过这个服务与另一个网络终端进行非直接的连接&#xff0c;而提供代理服务的电脑系统或其它类型的网络终端被称为代理服务器。 代理服务器是网络信息的中转站&#xff0c;代理服务器就像是一个很大的…...

编程日记 2024/10/10 2:54:14

高质量带货短视频素材来源推荐

在抖音带货时&#xff0c;寻找高质量视频素材至关重要。今天&#xff0c;我为大家分享五个可以下载高清无水印带货短视频素材的网站&#xff0c;帮助你轻松获取灵感和素材&#xff01; 蛙学网 蛙学网作为国内领先的短视频素材平台&#xff0c;提供多种类的带货短视频素材。无论…...

编程日记 2024/10/10 2:53:11

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/2/8 22:00:17

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/2/7 11:00:30

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...

编程新知 2026/1/20 10:06:51