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>

运行效果:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何通过 SSH 访问 VirtualBox 的虚机

VirtualBox 是一款免费虚机软件。在用户使用它安装了 linux 以后&#xff0c;它默认只提供了控制台的管理画面。 直接使用控制台管理 Linux 没有使用诸如 putty 或者 vscode 这样的 ssh 远程管理工具方便。那么可不可以直接使用 ssh 访问 VirtualBox 上的 Linux 呢&#xff1f…

GNN 学习笔记

稍微看一下之后备用。 【图神经网络综述】GNN原理&#xff0b;落地应用实现框架全解_gnn实现-CSDN博客 GNN相比CNN最大的区别在于数据结构&#xff0c;CNN一般作用在二维、三维数据里&#xff0c;如图像、表格数据等&#xff0c;可以进行卷积操作。而GNN作用在一个由节点和边…

模拟目录管理 - 华为OD统一考试(C卷)

OD统一考试(C卷) 分值: 200分 题解: Java / Python / C++ 题目描述 实现一个模拟目录管理功能的软件,输入一个命令序列,输出最后一条命令运行结果。 支持命令: 1)创建目录命令: mkdir 目录名称,如mkdir abc为在当前目录创建abc目录,如果已存在同名目录则不执行任何操作…

案例055:基于微信小程序的四六级词汇

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

超简单的新手重装Win10系统教程图解

如果我们的电脑系统出现问题了&#xff0c;那么就可以选择重装安装系统&#xff0c;轻轻松松解决系统问题&#xff0c;从而恢复对电脑的正常使用。但是&#xff0c;作为新手用户不懂很多的装机专业知识&#xff0c;所以重装系统的难度比较大&#xff0c;接下来小编给大家介绍超…

pytest-fixtured自动化测试详解

fixture的作用 1.同unittest的setup和teardown,作为测试前后的初始化设置。 fixture的使用 1.作为前置条件使用 2.fixture的的作用范围 1.作为前置条件使用 pytest.fixture() def a():return 3def test_b(a):assert a3 2.fixture的作用范围 首先实例化更高范围的fixture…

Javascript高频面试题

系列文章目录 文章目录 系列文章目录前言1.JavaScript常见数据类型null 和 undefind区别symbol&#xff08;ES6新增&#xff09;、bigInt&#xff08;ES10新增&#xff09; 2.JavaScript判断数据类型的方式3. 和 区别&#xff0c;分别在什么情况使用&#xff1f;4.变量声明 va…

Unity检测AssetBundle是否循环依赖

原理&#xff1a;bundle的依赖关系构建一个二维的矩阵图&#xff0c;如果对角线相互依赖&#xff08;用1标记&#xff09;则表示循环依赖。 using PlasticGui; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; public cl…

Redis缓存异常问题,常用解决方案总结

前言 Redis缓存异常问题分别是&#xff1a;1.缓存雪崩。2.缓存预热。3.缓存穿透。4.缓存降级。5.缓存击穿&#xff0c;以 及对应Redis缓存异常问题解决方案。 1.缓存雪崩 1.1、什么是缓存雪崩 如果缓存集中在一段时间内失效&#xff0c;发生大量的缓存穿透&#xff0c;所有…

zabbix6入门到精通(3) 预处理

zabbix6入门到精通&#xff08;3&#xff09; 预处理 配置 — 主机 文件系统主项目 vfs.fs.get 测试一下 添加预处理 $[?(.fsname ‘/’)] $[0].inodes.pfree JSONPath参照&#xff1a; https://www.zabbix.com/documentation/6.0/zh/manual/config/items/preprocessi…

【Docker】进阶之路:(十三)Docker Swarm

目录 Docker Swarm架构与概念 Docker Swarm架构 Docker Swarm 相关概念 1.Swarm 2.Node Docker Swarm是Docker官方提供的集群管理工具&#xff0c;它的主要作用是将Docker主机池转变为单个虚拟Docker主机&#xff0c;把若干台Docker主机抽象为一个整体&#xff0c;并且通过…

django实现增删改查分页接口

django实现增删改查分页接口(小白必备) 在上篇文章中我使用nodejs实现了增删改查分页接口&#xff0c;这一篇我们则使用django实现。 1.创建一个django项目&#xff0c;命令如下 python manage.py startapp myapp 2.在你自己的myapp文件夹中的models.py中定义你们自己的模型 f…

java导出word使用模版与自定义联合出击解决复杂表格!

1. 看一下需要导出什么样子的表格 如图所示&#xff0c;这里的所有数据行都是动态的&#xff0c;需要根据查询出来的数据循环展示。 如果只是这样的话&#xff0c;使用freemarker应该都可以搞定&#xff0c;但是他一列中内容相同的单元格&#xff0c;需要合并。 这对于表格样式…

翻译: LLM大语言模型图像生成原理Image generation

文本生成是许多用户正在使用的&#xff0c;也是所有生成式人工智能工具中影响最大的。但生成式人工智能的一部分兴奋点也在于图像生成。目前也开始出现一些可以生成文本或图像的模型&#xff0c;这些有时被称为多模态模型&#xff0c;因为它们可以在多种模式中操作&#xff0c;…

配置android sudio出现的错误

导入demo工程&#xff0c;配置过程参考&#xff1a; AndroidStudio导入项目的正确方式&#xff0c;修改gradle配置 错误&#xff1a;Namespace not specified. Specify a namespace in the module’s build file. 并定位在下图位置&#xff1a; 原因&#xff1a;Android 大括号…

优雅玩转实验室服务器(二)传输文件

使用服务器最重要的肯定是传输文件了&#xff0c;我们不仅需要本地的一些资源上传到服务器&#xff0c;好进行实验&#xff0c;也需要将服务器计算得到的实验结果传输到本地&#xff0c;来进行预览或者报告撰写。 首先&#xff0c;由于涉及到服务器操作&#xff0c;我强烈推荐…

等保2.0的变化

1法律地位得到确认 《中华人民共和国网络安全法》第21条规定“国家实行网络安全等级保护制度”&#xff0c;要求“网络运营者应当按照网络安全等级保护制度要求&#xff0c;履行安全保护义务”&#xff1b;第31条规定“对于国家关键信息基础设施&#xff0c;在网络安全等级保护…

16ASM 汇编基础与Debug使用

目录 硬件运行机制 微机系统硬件组成 计算机系统组成 8086CPU组织结构 DoxBox安装 Debug使用 R命令 D命令 E命令 U命令 T命令 A命令 标志寄存器 常用机器指令 硬件运行机制 下面是一个电子器件二极管&#xff0c;正向加电则通&#xff0c;反向加电则不通 利用二…

MySQL索引_什么是索引_索引的分类_什么时候需要/不需要创建索引_优化索引_索引失效

文章目录 索引1. 什么是索引2. 索引的分类按数据结构分类按物理存储分类按字段特性分类按字段个数分类 3. 什么时候需要 / 不需要创建索引&#xff1f;什么时候适用索引&#xff1f;什么时候不需要创建索引&#xff1f; 4. 优化索引的方法前缀索引优化覆盖索引优化主键索引最好…

spring 笔记一 spring快速入门和配置文件详解

Spring简介 Spring是分层的 Java SE/EE应用full-stack 轻量级开源框架&#xff0c;以 IoC&#xff08;Inverse Of Control&#xff1a;反转控制&#xff09;和AOP&#xff08;Aspect Oriented Programming&#xff1a;面向切面编程&#xff09;为内核。 提供了展现层SpringMV…