宝哥软件园

关于v-if和v-show在vuejs中的区别以及v-show不起作用的问题

编辑:宝哥软件园 来源:互联网 时间:2021-09-01

1.官网概念描述

V-if是一个“真实”的条件呈现,因为它确保了条件块中的事件侦听器和子组件在切换过程中被正确销毁和重建。

V-if也是惰性的。如果条件在初始渲染中为假,则不会执行任何操作-直到条件第一次为真,才会渲染条件块。相比之下,v-show要简单得多——无论初始条件是什么,元素总是会被渲染,并且它只是基于css进行切换。

一般来说,v-if的切换开销较大,而v-show的渲染开销较大。因此,如果切换非常频繁,最好使用v-show;如果运行时条件不太可能改变,最好使用v-if。

2.实际结果

摘录:如果使用v-if,整个dom结构根本不会出现在页面上。如果使用v-show,则取决于以下条件。如果是真的,就会显示出来;如果为false,将使用style="display:none "添加。因此,如果是大组件,最好使用v-if,如果是暂时隐藏的。与v-show相比,v-show相当于v-style="display: none "和v-style="display: block "的快捷方式。

1.电视节目不起作用

最近我们在用vue_element-ui开发多页应用,遇到了v-show不行的问题。

A.问题描述,如下图所示(预期效果),其中表格数据动态变化,包括标题也会根据背景数据发生变化。如果背景返回的标题为空,则不会显示该列的内容。否则,将显示该列的所有数据。

部分代码如下:

上图所示效果图如下:

那么就会出现上图的效果,即v-show未能隐藏标题值为空的数据列

B.变通方法:

将v-show更改为v-if,以达到图1中的效果。

C.总结(个人意见):

El-table-column会生成多行标签元素,v-show不支持模板语法,因此推断v-show无法显示和隐藏多个元素。我想知道

可以这样理解,希望大神告诉我!因此,在这种情况下,只能通过v-if来实现。

另外,在渲染多个元素时,可以使用一个模板元素作为包装元素,并使用v-if对其进行条件判断。最终的渲染将不包括这个元素。同时,v-show不支持模板语法。

摘要

以上就是v-if和v-show在vuejs中的区别,以及v-show不工作的问题。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

更多资讯
游戏推荐
更多+