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

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

news 2026/2/7 13:08:49

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/7 7:53:36

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/5 10:34:36

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36