v-show切换显示隐藏失败

2023-11-17

最近在使用element-ui时发现使用v-show显示某一元素不生效

问题:

当切换到日期维度时坐席中心并不会跟着改变
在这里插入图片描述

解决方法:

将v-show替换成v-if

总结:

在这里插入图片描述
v-show是不支持template语法的

v-if vs v-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

v-show切换显示隐藏失败 的相关文章

随机推荐

  • Spring Boot 整合 MyBatis 实现乐观锁和悲观锁

    完整代码 https github com imcloudfloating Lock Demo GitHub Page http blog cloudli top posts Spring Boot MyBatis 实现乐观锁和悲观锁 原文
  • Oracle 数据库审计

    保证数据库的安全有两种方式 一种是通过权限的存取控制机制 即通过预先控制来防止安全事件的发生 另一种是数据库审计 即对数据库活动做跟踪记录 当发生安全事件时 通过对数据库活动记录进行审计来发现并修复安全问题 Oracle使用大量不同的审计方
  • 用Python写个弹球的游戏

    原创 xinxin 菜鸟学Python 我们前面讲了几篇关于类的知识点 为了让大家更好的掌握类的概念 并灵活的运用这些知识 我写了一个有趣又好玩的弹球的游戏 一来可以把类的知识融会一下 二来加深对Python的兴趣 你会发现哎呀Python
  • eclipse Maven 插件添加第三方远程仓库

    方法一 在maven 配置文件setting xml 添加镜像点 mirror eclipse的 preferences gt maven gt User Settings 你就可以看到你的setting xml文件的地址 打开settin
  • SqueezeNet运用到Faster RCNN进行目标检测+OHEM

    目录 目录 一SqueezeNet介绍 MOTIVATION FIRE MODULE ARCHITECTURE EVALUATION 二SqueezeNet与Faster RCNN结合 三SqueezeNetFaster RCNNOHEM
  • unity出pc的包,然后想调试C#的dll咋办

    加入我们的逻辑代码是以dll的方式 放到unity项目中如下 namespace CSharpDll public class Utils public int Add int a int b int c a b return c publ
  • 2013全球移动游戏产业白皮书

    2013全球移动游戏产业白皮书 在全球移动游戏产业迅猛发展的背景下 中国移动游戏产业也进入了 高铁 时代 2013年 中国国内Android和iOS活跃设备量已达到3 7亿部 并涌现出20余款月流水超过千万元的 明星 移动游戏产品 对其内容
  • mysql数据库各种应用_MySQL数据库常见管理应用(1)

    MySQL数据库常见管理应用 1 创建数据库 创建一个数据库solin mysql gt create database solin 建立一个名为solin gbk的GBK字符集 mysql gt create database solin
  • Java通过反射获取注解以及注解中的信息

    首先自定义两个注解 1 用于描述表名 只能用在类 接口 枚举上 Target ElementType TYPE Retention RetentionPolicy RUNTIME public interface TableName Str
  • 《现代控制系统》第五章——反馈控制系统性能分析 5.3 二阶系统的性能

    现在我们看一个单环二阶系统的单位阶跃响应 一个闭环反馈控制系统如下图所示 已知该闭环系统的转换方程为 把受控系统的转换方程代入进去得到 如果给一个阶跃输入 那么 查拉普拉斯逆变换表我们得到时域输出为 其中 同时也是特征方程在s域的根与原点的
  • 实际项目二次封装axios------request.js和使用

    前言 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 本质上也是对原生XHR的封装 只不过它是Promise的实现版本 符合最新的ES规范 在项目的实际开发中用到也比较多 这里我介绍一下实际开发中的基
  • 什么是高内聚、低耦合?

    起因 模块独立性指每个模块只完成系统要求的独立子功能 并且与其他模块的联系最少且接口简单 两个定性的度量标准 耦合性和内聚性 耦合性也称块间联系 指软件系统结构中各模块间相互联系紧密程度的一种度量 模块之间联系越紧密 其耦合性就越强 模块的
  • align-items属性

    弹性子元素在 侧轴 交叉轴上的对齐方式 align items stretch 默认值 如果弹性子元素没有高度或高度为auto 将占满整个容器的高度 align items flex start 子元素在侧轴顶端对齐 align items
  • CSS餐厅小游戏练习1~32关(附答案和链接)

    前言 CSS3众多基础常见的选择器都可以小游戏中学习 每天刷一遍 辅助记忆 做好熟练运用CSS3的第一步 小游戏链接 CSS3餐厅练习 玩法 利用各种选择器和选择器之间的关系选中抖动的物体即可通关 文章目录 第一关 Type Selecto
  • postgresql从入门到菜鸟(三)基本命令和窗口函数

    上一篇我们已经在rhel上创建了数据库 并且建立的一张成绩表 之后通过通过客户端连接上服务器端 这一篇将会写一些关于数据库的操作 首先是一些基本的操作的操作如选择数据库 查看表等等 连接至服务器端后可以通过以下命令查看数据库的基本信息 l
  • 记录element-plus + vue3.2 + tsx 开发时的问题

    开发时 select组件无法通过 model value v model value 设置值 查看了一下源码 image png https p1 juejin byteimg com tos cn i k3u1fbpfcp e1e92e6
  • 搞懂了Vue对象与实例的区别!

    很多人把Vue对象和Vue实例混为一谈 但它们还是有区别的 Vue构造函数就像一台智能手机的设计图纸 定义了这款手机的总体结构和组件 而每部依照设计图组装出来的真实手机 就是Vue实例 设计图上注明了屏幕尺寸 CPU型号等静态信息 对应Vu
  • vscode 自动导入包(组件)插件Auto Import安装好后,依旧没有自导导入提示的原因

    在TodoList js中 第一次用AntDesign的
  • Linux系统下搭建(更新)cuda环境

    本人之前ubuntu系统装的是cuda8 因为模型需要升级cuda 因此重新装cuda10 安装和更新cuda和cudnn以及安装和更新显卡驱动 下面操作都适合 一 安装 升级 显卡驱动 升级cuda之前 先要升级显卡驱动 登陆网页http
  • v-show切换显示隐藏失败

    最近在使用element ui时发现使用v show显示某一元素不生效 问题 当切换到日期维度时坐席中心并不会跟着改变 解决方法 将v show替换成v if 总结 v show是不支持template语法的 v if vs v show