v-show不生效如何处理

这次给大家带来v-show生效如何处理,处理v-show不生效的注意事项有哪些,下面就是实战案例,一起来看一下。

1.官网概念描述

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

v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- – 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show就简单得多- – 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.

一般来说,v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点.

2.实践结果

摘录: 如果用v-if的话,整个dom结构压根就不会出现在页面上,如果是用v-show的话,要视后面的条件来定,如果是true,则显示,如果为false,则加上style=”display:none”. 所以呢,如果是组件之类的大块头,个人觉得用v-if更好一些,如果是一些暂时性隐藏,一会要显示的,还是v-show更方便。对于v-style和v-show来比较,v-show相当于是v-style=”display:none”和v-style=”display:block”的快捷方式。

1. v-show不起作用问题

最近在用vue_element-ui开发多页面应用,其中遇到v-show不起作用问题.

a.问题描述,如下图(预想达到的效果),其中表格数据是动态变化的,包括标题也会根据后台数据发生改变,如果后台返回的标题为空,那么就不显示该列的内容.反之则显示该列的所有数据.

v-show不生效如何处理

部分代码如下:

v-show不生效如何处理

执行上图出现的效果图如下:

v-show不生效如何处理

那么就会出现上图的效果,也就是v-show没能隐藏标题值为null的那列数据

b.解决方法:

将v-show改为v-if即可实现图一中的效果.

c.总结(个人见解):

由于el-table-column会生成多行标签元素,根据v-show是不支持template语法的,推断出v-show不能显示隐藏多个元素?不知是否

可以这样理解,望大神告知!所以这种情况下只能用v-if来实现.

另外补充,在渲染多个元素时候可以把一个元素作为包装元素,并在上面使用v-if进行条件判断,最终的渲染并不会包含这个元素.同时,v-show不支持语法.

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Console有哪些Debug方法

Node module模块使用详解(附代码)

以上就是v-show不生效如何处理的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2764974.html

(0)
上一篇 2025年3月8日 10:39:15
下一篇 2025年3月1日 03:25:25

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • v-show添加表达式步骤详解

    这次给大家带来v-show添加表达式步骤详解,v-show添加表达式的注意事项有哪些,下面就是实战案例,一起来看一下。 一、需求场景 1、先来说说我的需求,有数据来源和标签类型两行选项,如下图所示: 2、根据需求,我需要在点击上面的某个数据…

    2025年3月8日
    200
  • Vue 按键修饰符处理事件的方法

    这篇文章主要介绍了vue 按键修饰符的相关资料,vue中新增按键修饰符和系统修饰符来处理类似的事件,具体内容详情大家参考下 按键修饰符 在 PC 端开发时, 我们常常会遇到类似的需求, 比如用户按下 enter 键时提交表单, 没有用按键修…

    编程技术 2025年3月8日
    200
  • vue渲染时闪烁应如何处理

    这次给大家带来vue渲染时闪烁应如何处理,vue渲染时闪烁处理的注意事项有哪些,下面就是实战案例,一起来看一下。  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可…

    编程技术 2025年3月8日
    200
  • Vue项目里跨域处理方法

    这次给大家带来Vue项目里跨域处理方法,Vue项目里跨域处理的注意事项有哪些,下面就是实战案例,一起来看一下。 问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header(“Access-Control-Allow…

    2025年3月8日
    200
  • vuejs中v-if和v-show使用详解

    这次给大家带来vuejs中v-if和v-show使用详解,vuejs中v-if和v-show使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1.官网概念描述 v-if 是’真正的’条件渲染,因为它会确保在切换…

    2025年3月8日
    200
  • Vue中v-show判断表达式如何实现

    这次给大家带来Vue中v-show判断表达式如何实现,Vue中v-show判断表达式实现的注意事项有哪些,下面就是实战案例,一起来看一下。 一、需求场景 1、先来说说我的需求,有数据来源和标签类型两行选项,如下图所示: 2、根据需求,我需要…

    2025年3月8日
    200
  • vue页面DOM操作失效如何处理

    这次给大家带来vue页面DOM操作失效如何处理,处理vue页面DOM操作失效的注意事项有哪些,下面就是实战案例,一起来看一下。 现象: 使用Element UI渲染了一个树形结构,设计在鼠标移入每个节点是显示其中的操作按钮,效果如下: 下面…

    2025年3月8日 编程技术
    200
  • 详解JS浮点数运算处理(图文教程)

    本篇文章主要介绍了js–浮点数运算处理,现在分享给大家,也给大家做个参考。感兴趣的小伙伴们可以参考一下。 一. 问题描述 最近在做一个项目,页面上会存在一些JS浮点数的运算,发现JS浮点数运算存在一些bug.譬如: 0.1+0.…

    编程技术 2025年3月8日
    200
  • 利用js实现事件处理模型

    本篇文章主要介绍了利用js实现事件处理模型,对初学这具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 在各种浏览器中存在四种事件模型:原始事件模型、标准事件模型、IE事件模型,还有一种Netscape4事件模型,下面具体介绍一下。 1、目…

    编程技术 2025年3月8日
    200
  • Ajax请求二进制流进行处理(ajax异步下载文件)

    ajax请求一个二进制流(文件),转换为blob进行处理或者下载保存文件 需求 管理后台需要随时下载数据报表,数据要实时生成后转换为excel下载。 文件不大,页面放置“导出”按钮,点击按钮后弹出保存文件对话框保存 说明:第一种方法使用a标…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论