vuejs에서 v-show를 사용할 수 없는 이유는 무엇입니까?

이번에는 vuejs에서 v-show를 사용할 수 없는 이유를 알려드리겠습니다. vuejs에서 v-show를 사용할 때 주의사항은 무엇인가요?

1.공식 홈페이지 컨셉 설명

v-if는 'true' 조건부 렌더링입니다. 이는 조건부 블록 내의 event리스너와 하위 구성 요소가 전환 중에 적절하게 삭제되고 다시 빌드되도록 보장하기 때문입니다.

v-if도 게으르다. 초기 렌더링 중에 조건이 false이면 아무 작업도 수행되지 않습니다. 조건이 처음으로 true가 될 때까지 조건 블록은 렌더링을 시작하지 않습니다. 이에 비해 v-show는 매우 간단합니다. - - 초기 조건이 무엇이든 요소는 항상 CSS를 기반으로 렌더링되고 간단히 전환됩니다.

일반적으로 v-if는 전환 오버헤드가 높고 v-show는 렌더링 오버헤드가 높습니다. 따라서 매우 빈번한 전환이 필요한 경우 런타임 조건이 좋지 않으면 v-show를 사용하는 것이 좋습니다. 변동될 수 있으니 v-if를 사용하시는 것이 더 좋습니다

2.실제 결과

발췌: v-if를 사용하면 전체 dom 구조가 페이지에 전혀 표시되지 않습니다. v-show를 사용하면 다음 조건에 따라 true가 false로 표시됩니다. , 그런 다음 On style="<a href="//m.sbmmt.com/wiki/927.html" target="_blank">display<code>style=”<a href="//m.sbmmt.com/wiki/927.html" target="_blank">display</a>: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来实现.

另外补充,在渲染多个元素时候可以把一个<template>元素作为包装元素,并在上面使用v-if进行条件判断,最终的渲染并不会包含这个元素.同时,v-show不支持<template>:none"을 추가합니다. 이런 큰 일에는 v-if를 사용하는 것이 개인적으로 좋다고 생각합니다. 일시적으로 숨겨져 있다가 나중에 표시될 것이라면 v-show가 더 편리합니다. v-style과 v-show를 비교하면 v-show는 v-style="display:none" 및 v-style="display:block" 단축키와 동일합니다.

최근에 vue_element-ui를 사용하여 다중 페이지 애플리케이션을 개발했는데 v-show가 작동하지 않는 문제에 직면했습니다.

위 내용은 vuejs에서 v-show를 사용할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!