在vuejs中使用v-show不起作用的原因有哪些

这次给大家带来在vuejs中使用v-show不起作用的原因有哪些,在vuejs中使用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没能隐藏标题值为null的那列数据

b.解决方法:

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

c.总结(个人见解):

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

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

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

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

推荐阅读:

Vue.js提升必知的几点总结

vue计算属性详解

以上就是在vuejs中使用v-show不起作用的原因有哪些的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月8日 13:58:25
下一篇 2025年3月8日 13:58:37

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

相关推荐

  • vue对storejs获取数据进行处理的步奏详解

    这次给大家带来vue对storejs获取数据进行处理的步奏详解,vue对storejs获取数据进行处理的注意事项有哪些,下面就是实战案例,一起来看一下。 具体代码如下所示: export default { data(){ return {…

    编程技术 2025年3月8日
    200
  • JS怎样扩展字符串拼接

    这次给大家带来JS怎样扩展字符串拼接,JS扩展字符串拼接的注意事项有哪些,下面就是实战案例,一起来看一下。 1、题外话,有关概念理解:String.prototype 属性表示 String原型对象。所有 String 的实例都继承自 St…

    编程技术 2025年3月8日
    200
  • JS如何实现随机切换微信号

    这次给大家带来JS如何实现随机切换微信号,JS实现随机切换微信号的注意事项有哪些,下面就是实战案例,一起来看一下。 js代码: arr_wx =new Array(“aaaa”,”bbbb”,”cccc”); var wx_index = …

    编程技术 2025年3月8日
    200
  • AngularJS怎么重新加载路由页面

    这次给大家带来AngularJS怎么重新加载路由页面,AngularJS重新加载路由页面的注意事项有哪些,下面就是实战案例,一起来看一下。 用angular做项目,会碰到需要点击菜单刷新当前页面,加载当前页面,但是同一个路由页面点击没反应;…

    编程技术 2025年3月8日
    200
  • vue.js底部导航栏的子路由不显示怎么处理

    这次给大家带来vue.js底部导航栏的子路由不显示怎么处理,处理vue.js底部导航栏子路由不显示的注意事项有哪些,下面就是实战案例,一起来看一下。 最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要…

    编程技术 2025年3月8日
    200
  • Node.JS实现段点续传配置文件的分段下载

    这次给大家带来Node.JS实现段点续传配置文件的分段下载,Node.JS实现段点续传配置文件分段下载的注意事项有哪些,下面就是实战案例,一起来看一下。 Header标签 请求 Request Header: 下载 3744 以后的文件内容…

    编程技术 2025年3月8日
    200
  • vue.js中怎么导入css库

    这次给大家带来vue.js中怎么导入css库,vue.js中导入css库的注意事项有哪些,下面就是实战案例,一起来看一下。 1.安装以下模块,让webpack可以解析css文件 cnpm install style-loader –sav…

    编程技术 2025年3月8日
    200
  • Vue.js怎样实现图片可以随意拖动摆放

    相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章! 推荐阅读: 这次给大家带来Vue.js怎样实现图片可以随意拖动摆放,Vue.js实现图片可以随意拖动摆放的注意事项有哪些,下面就是实战案例,一起来看一下。 主要代码如…

    编程技术 2025年3月8日
    200
  • js怎样实现中文拼音的A-Z排序

    这次给大家带来js怎样实现中文拼音的A-Z排序,js实现中文拼音的A-Z排序的注意事项有哪些,下面就是实战案例,一起来看一下。 实现中文按照A-Z的方法,可以在vue的methods里面写入: methods:{ pySort:functi…

    编程技术 2025年3月8日
    200
  • vue.js移动数组位置并实时更新视图

    这次给大家带来vue.js移动数组位置并实时更新视图,vue.js移动数组位置并实时更新视图的注意事项有哪些,下面就是实战案例,一起来看一下。 使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作。 需要对option…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论