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

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

news 2026/2/9 5:16:53

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/2/8 20:42:56

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/8 14:19:47

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/2/6 13:10:51

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24