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

【Uniapp-Vue3】v-if条件渲染及v-show的选择对比

如果我们想让元素根据响应式变量的值进行显示或隐藏可以使用v-if或v-show

 一、v-show 

另一种控制显示的方法就是使用v-show,使用方法和v-if一样,为true显示,为false则不显示。

二、v-if

v-if除了可以像v-show一样单独使用外,还可以和其他的搭配使用。

1. v-if和v-else一起使用

需要注意,v-if和v-else之间不能有其他的东西,就像下面这样:

 我在v-if和v-else之间多加了两个“--”,会报错,但是允许中间有空格。

2.  v-if和v-else-if和v-else一起使用

同样的,中间不能被其他东西打断,可以有空格。

三、v-show和v-if的区别 

他们在值为true都进行显示,在false的时候进行隐藏,但是隐藏的方式不同。

我们可以看见:v-show是以改变display的方式进行隐藏,v-if是以不渲染DOM的形式进行隐藏。

 

http://www.lryc.cn/news/518792.html

相关文章:

  • 宝塔面板使用 GoAccess Web 日志分析教程
  • Windows 安装 Docker 和 Docker Compose
  • arcgis中用python脚本批量给多个要素类的相同字段赋值
  • 目标客户营销(ABM)结合开源AI智能名片2+1链动模式S2B2C商城小程序的策略与实践
  • 《异步编程之美》— 全栈修仙《Java 8 CompletableFuture 对比 ES6 Promise 以及Spring @Async》
  • 新模型设计:Hybrid Quantum-Classical Neural Network (HQCNN) for Image Classification
  • iOS 中spring动画的使用
  • 初学stm32 --- DMA直接存储器
  • 校医院挂号及预约 APP 的设计与实现
  • 代理模式详解与应用
  • Model-based RL自动出价算法的演进之路
  • .NET AI 开发人员库 --AI Dev Gallery简单示例--问答机器人
  • 框架部分面试题学习
  • tdengine数据库使用java连接
  • Java 模板变量替换——字符串替换器(思路Mybatis的GenericTokenParser)
  • 跨界融合:人工智能与区块链如何重新定义数据安全?
  • android 自定义SwitchCompat,Radiobutton,SeekBar样式
  • 计算机网络的定义与发展历程
  • 对比学习 (Contrastive Learning) 算法详解与PyTorch实现
  • DBeaver执行本地的sql语句文件避免直接在客户端运行卡顿
  • C++ 的 pair 和 tuple
  • Zookeeper 集群安装
  • git merge与rebase区别以及实际应用
  • kvm虚拟机出现应用程序无法正常启动报0xc0000142错误
  • Redis 安装与 Spring Boot 集成指南
  • Flink集成TDEngine来批处理或流式读取数据进行流批一体化计算(Flink SQL)拿来即用的案例
  • 【STM32】利用SysTick定时器定时1s
  • Python中的format格式化、填充与对齐、数字格式化方式
  • winform第三方界面开源库AntdUI的使用教程保姆级环境设置篇
  • 如何使用Yarn Workspaces实现Monorepo模式在一个仓库中管理多个项目