Vue3-09-条件渲染-v-show 的基本使用

v-show 的作用

v-show 可以根据条件表达式的值【展示】或【隐藏】html 元素。

v-show 的特点

v-show 的实现方式是 控制 dom 元素的 css的 display的属性,
因此,无论该元素是否展示,该元素都会正常渲染在页面上,
当v-show 的 条件值发生改变时,改变的时该元素的 display 属性 。

v-show 的使用案例

<template><div v-show="flag == 1">第一个div</div><div v-show="flag == 2">第二个div</div><div v-show="flag > 2">其他的div</div></template><script setup lang="ts">import { ref } from 'vue'// 定义一个变量const flag = ref(3)</script><style scoped></style>

运行效果:

在这里插入图片描述

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

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

相关文章

【Linux】cp问题,生产者消费者问题代码实现

文章目录 前言一、 BlockQueue.hpp&#xff08;阻塞队列&#xff09;二、main.cpp 前言 生产者消费者模式就是通过一个容器来解决生产者和消费者的强耦合问题。生产者和消费者彼此之间不直接通讯&#xff0c;而通过阻塞队列来进行通讯&#xff0c;所以生产者生产完数据之后不用…

Java实现对图片压缩指定大小。比如1260*945。如果图片尺寸大于,就压缩。小于,就拉伸到指定大小

需求&#xff1a; Java实现对图片压缩指定大小。比如1260*945。如果图片尺寸大于&#xff0c;就压缩。小于&#xff0c;就拉伸到指定大小 代码实现&#xff1a; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.F…

MYSQL练题笔记-高级字符串函数 / 正则表达式 / 子句-简单3题

这个系列先写了三题&#xff0c;比较简单写在一起。 1.修复表中的名字相关的表和题目如下 看题目就知道是有关字符串函数的&#xff0c;于是在书里查询相关的函数&#xff0c;如下图&#xff0c;但是没有完全对口的函数&#xff0c;所以我还是去百度了。 然后发现结合上面的4个…

大数据Doris(三十七):索引和Rollup基本概念和案例演示

文章目录 索引和Rollup基本概念和案例演示 一、基本概念 二、 案例演示

读书笔记-《数据结构与算法》-摘要5[归并排序]

归并排序 核心&#xff1a;将两个有序对数组归并成一个更大的有序数组。通常做法为递归排序&#xff0c;并将两个不同的有序数组归并到第三个数组中。 先来看看动图&#xff0c;归并排序是一种典型的分治应用。 public class MergeSort {public static void main(String[] ar…

深入理解 hash 和 history:网页导航的基础(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

AUTOSAR ComM模块配置以及代码

ComM模块配置以及代码执行流程 1、基本的一个通道的配置列表 ComMNmVariant 概念的个人理解&#xff1a; FULL&#xff1a; 完全按照AUTOSAR NM方式进行调用 LIGHT &#xff1a;设置一个超时时间&#xff0c;在请求停止通信的时候开始计时&#xff0c;超时之后才会进入FULLCOM…

web之CSS悬停效果页面设计

参考小米商城的“手机”页面&#xff0c;做出一个“手机”的标签&#xff0c;实现当鼠标悬停在“手机”上时&#xff0c;出现手机系列菜单&#xff1b;当鼠标移走时&#xff0c;菜单页面消失的效果&#xff01; 参考图&#xff1a; 实现代码&#xff1a; <!DOCTYPE html&g…

基于双目RGB图像和图像深度信息的三维室内场景建模matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 双目视觉原理 4.2 深度信息获取 4.3 表面重建 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .....................................…

接口测试--参数实现MD5加密签名规则

最近有个测试接口需求&#xff0c;接口有签名检查&#xff0c;签名规范为将所有请求参数按照key字典排序并连接起来进行md5加密&#xff0c;格式是&#xff1a;md5(bar2&baz3&foo1),得到签名&#xff0c;将签名追加到参数末尾。由于需要对参数进行动态加密并且做压力测…

2023年度佳作:AIGC、AGI、GhatGPT、人工智能大语言模型的崛起与挑战

目录 前言 01 《ChatGPT 驱动软件开发》 内容简介 02 《ChatGPT原理与实战》 内容简介 03 《神经网络与深度学习》 04 《AIGC重塑教育》 内容简介 05 《通用人工智能》 目  录 前言 2023年是人工智能大语言模型大爆发的一年&#xff0c;一些概念和英文缩写也在这一…

基于ssm物流管理系统论文

摘 要 本物流管理系统设计目标是实现物流的信息化管理&#xff0c;提高管理效率&#xff0c;使得物流管理作规范化、科学化、高效化。 本文重点阐述了物流管理系统的开发过程&#xff0c;以实际运用为开发背景&#xff0c;基于SSM框架&#xff0c;运用了Java编程语言和MYSQL数…

Azure Machine Learning - 提示工程简介

OpenAI的GPT-3、GPT-3.5和GPT-4模型基于用户输入的文本提示工作。有效的提示构造是使用这些模型的关键技能&#xff0c;涉及到配置模型权重以执行特定任务。这不仅是技术操作&#xff0c;更像是一种艺术&#xff0c;需要经验和直觉。本文旨在介绍适用于所有GPT模型的提示概念和…

Ubuntu 常用命令之 chmod 命令用法介绍

chmod是Linux系统下的一个命令&#xff0c;用于改变文件或目录的权限。它的名称是“change mode”的缩写。在Linux中&#xff0c;文件或目录的权限分为读&#xff08;r&#xff09;、写&#xff08;w&#xff09;和执行&#xff08;x&#xff09;三种&#xff0c;分别对应数字4…

【Azure 架构师学习笔记】- Azure Databricks (3) - 再次认识DataBricks

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (2) -集群 前言 在对Databricks有了初步了解之后&#xff0c;如果要深入使用则需要对其进行更深层次的了解。 Databricks ADB 是一个统一的…

os功能模板

【 一 】简介 os 就是 “operating system” 的缩写&#xff0c;顾名思义&#xff0c;os 模块提供的就是各种 Python 程序与操作系统进行交互的接口。通过使用 os 模块&#xff0c;一方面可以方便地与操作系统进行交互&#xff0c;另一方面页可以极大增强代码的可移植性。如果该…

全国职业院校技能大赛“大数据应用开发”赛项说明

1、赛项介绍 &#xff08;1&#xff09;赛项名称 全 国 职 业 院 校 技 能 大 赛 “大数据应用开发” 赛 项 职业院校技能大赛官网 (vcsc.org.cn)https://www.vcsc.org.cn/ 大赛组织机构介绍 全国职业院校技能大赛(以下简称大…

【数据结构】八大排序之希尔排序算法

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.优化直接插入排序算法 我们在之前对直接插入排序算法的优化部分通过对直接插入排序的分析可以得到一个结论,即: 进行直接插入排序的数组,如果越接近局部有序,则后续进行直…

电脑技巧:笔记本电脑保养技巧诀,让你的电脑多用几年

新到手的宝贝笔记本电脑爱不释手&#xff0c;要想它长久的陪伴&#xff0c;平时的维护与保养自然不能少&#xff0c;今天小编给大家分享一下&#xff0c;如何保养和维护笔记本的各个部件。 一、电 池 电池是笔记本实现移动办公的重要部件&#xff0c;电池状况直接影响了电池的…

最完整的Web视频加密播放技术实现(含技术调研和Demo源码)

大厂技术 高级前端 Node进阶 点击上方 程序员成长指北&#xff0c;关注公众号 回复1&#xff0c;加入高级Node交流群 作者&#xff1a;然燃 &#xff08;感谢小伙伴投稿分享&#xff09;原文链接: https://juejin.cn/post/7307934456995856419 最近又遇到了web视频化的场景&a…