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

【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.kler.cn/a/472211.html

相关文章:

  • 用豆包MarsCode IDE打造精美数据大屏:从零开始的指南
  • 009:传统计算机视觉之边缘检测
  • 【Axios使用手册】如何使用axios向后端发送请求并进行数据交互
  • NOVA:AutoRegressive Video Generation Without Vector Quantization——自回归视频生成无需向量量化
  • 【C++】线程启动、结束与创建线程写法
  • WebSocket 实现指南
  • 第07章 存储管理(一)
  • 第82期 | GPTSecurity周报
  • 基于Vite+TS初始项目 | 不断更新
  • vue 项目集成 electron 和 electron 打包及环境配置
  • 基于R语言的DICE模型
  • gitee 使用教程
  • 基于springboot线上教学平台
  • Linux 查找工具 - find 命令介绍
  • Backend - C# 操作数据库 DB(ADO.NET、LINQ to SQL、EF)
  • MyBatis SQL 映射文件基础
  • Jupyter Notebook 取消数据框(DataFrame)缩略显示
  • 02、Docker学习,理论知识,第二天:基础概念与常用命令
  • 基于Elasticsearch8的向量检索实现相似图形搜索
  • cesium入门学习五(2025年版本)-------------cesium加载离线地图
  • 【手写数据库内核miniToadb】第1天 模拟数据库流程,剖析数据库内核的组成结构
  • JavaScript系列(9)-- Set数据结构专题
  • 鸿蒙中使用获取本地JSON文件
  • 牛客网刷题 ——C语言初阶(2分支和循环-for)——打印菱形
  • SpringBoot3集成案例
  • Flannel:Kubernetes 网络方案的“轻骑兵”