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="http://www.php.cn/wiki/927.html" target="_blank">display<code>style=”<a href="http://www.php.cn/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></template>元素作为包装元素,并在上面使用v-if进行条件判断,最终的渲染并不会包含这个元素.同时,v-show不支持<template></template>: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.해결책:🎜🎜🎜🎜 그림 1의 효과를 얻으려면 v-show를 v-if로 변경하세요.🎜🎜 🎜c. 요약(개인 의견):🎜🎜🎜🎜 el-table-column은 여러 줄의 레이블 요소를 생성하므로 v-show는 템플릿 구문을 지원하지 않으므로 v-show가 여러 요소를 표시하거나 숨길 수 없는 것으로 추론할 수 있습니다. 🎜🎜 이런 식으로 이해될 수 있으니, 이 경우에는 v-if만 사용하면 됩니다.🎜🎜 또한 여러 요소를 렌더링할 때 <template></template> 요소를 패키징 요소로 사용할 수 있으며, 해당 요소에 v-if를 사용하여 조건부 판단🎜, 최종 렌더링에는 이 요소가 포함되지 않습니다. 동시에 v-show는 code> 문법.🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜Vue.js를 개선하기 위해 알아야 할 몇 가지 요약 사항🎜🎜🎜🎜🎜Vue 계산 속성에 대한 자세한 설명🎜🎜🎜🎜

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