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

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

news 2026/4/1 10:01:37

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

AudioLDM-S极速音效生成：5分钟搞定游戏音效，小白也能当音效师

AudioLDM-S极速音效生成&#xff1a;5分钟搞定游戏音效&#xff0c;小白也能当音效师 1. 游戏音效制作的新纪元 想象一下这样的场景&#xff1a;你正在开发一款独立游戏&#xff0c;需要一个"科幻飞船引擎启动"的音效。传统方式可能需要花费数小时搜索音效库、购买…...

编程新知 2026/4/1 9:07:23

矿井排水系统直接关系到煤矿安全生产，今天咱们掰开揉碎了聊聊西门子S7-200 PLC控制三台水泵的实战经验。老规矩，先上干货再说原理

基于西门子PLC的煤矿排水系统控制&#xff0c;内容包括 [1]S7-200 PLC程序[2]MCGS6.2组态画面[3]电气图纸精品文档 共有3台水泵进行矿井排水&#xff0c;分别为1号水泵&#xff0c;2号水泵&#xff0c;3号水泵 其中1号&#xff0c;2号水泵是工作水泵&#xff0c;3号水泵是备用水…...

编程新知 2026/4/1 8:28:23

G-Helper终极指南：如何用轻量级工具优化华硕笔记本性能与电池健康

G-Helper终极指南&#xff1a;如何用轻量级工具优化华硕笔记本性能与电池健康 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF…...

编程新知 2026/4/1 8:08:06

小白也能搞定：CYBER-VISION零号协议智能助盲系统部署全流程

小白也能搞定&#xff1a;CYBER-VISION零号协议智能助盲系统部署全流程 1. 系统介绍与准备工作 CYBER-VISION零号协议是一款专为视障人士设计的智能助盲系统&#xff0c;它通过先进的计算机视觉技术&#xff0c;将周围环境实时转化为可理解的语音提示。想象一下&#xff0c;当…...

编程新知 2026/4/1 7:29:14

数据库课程设计好帮手：Phi-4-mini-reasoning辅助ER图设计与SQL优化

数据库课程设计好帮手&#xff1a;Phi-4-mini-reasoning辅助ER图设计与SQL优化 1. 课程设计的痛点与解决方案 每到学期末&#xff0c;计算机专业的学生们都会面临一个共同的挑战——数据库课程设计。这个需要完成ER图设计、SQL编写和文档撰写的综合项目&#xff0c;常常让初学…...

编程新知 2026/4/1 7:00:22

OpenCompass本地评测大模型实战指南（2025最新版）

1. 为什么你需要OpenCompass本地评测 最近两年大模型发展太快了&#xff0c;各种新模型层出不穷。作为开发者&#xff0c;你是不是经常遇到这样的困惑&#xff1a;这个新发布的模型到底效果如何&#xff1f;和之前用的模型相比优势在哪里&#xff1f;官方公布的benchmark数据靠…...

编程新知 2026/4/1 5:37:01

Super IO：提升Blender批量处理效率的自动化流程解决方案

Super IO&#xff1a;提升Blender批量处理效率的自动化流程解决方案 【免费下载链接】super_io blender addon for copy paste import / export 项目地址: https://gitcode.com/gh_mirrors/su/super_io 在3D设计工作流中&#xff0c;设计师常常面临文件格式转换繁琐、跨…...

编程新知 2026/4/1 4:03:42

BG3 Mod加载异常完全解决方案：从顺序重置到冲突修复的系统指南

BG3 Mod加载异常完全解决方案&#xff1a;从顺序重置到冲突修复的系统指南 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 博德之门3 Mod管理器故障解决是许多玩家在使用BG3ModManager时…...

编程新知 2026/4/1 2:42:21

SDXL 1.0电影级绘图工坊惊艳案例：电影质感风景图动态范围实测

SDXL 1.0电影级绘图工坊惊艳案例&#xff1a;电影质感风景图动态范围实测 1. 项目简介 SDXL 1.0电影级绘图工坊是基于Stable Diffusion XL Base 1.0模型深度优化的AI绘图工具&#xff0c;专门为RTX 4090显卡的24G大显存进行了极致性能调优。与常规部署方式不同&#xff0c;这…...

编程新知 2026/4/1 2:42:20

Nordic Power Profiler Kit II 保姆级教程：从硬件连接到软件操作全流程

Nordic Power Profiler Kit II 实战指南&#xff1a;从开箱到精准功耗分析 第一次拿到Power Profiler Kit II&#xff08;PPK2&#xff09;时&#xff0c;我正为一个蓝牙低功耗项目的电池寿命问题头疼不已。这款由Nordic Semiconductor推出的专业功耗分析工具&#xff0c;凭借其…...

编程新知 2026/4/1 2:16:02