반응형
VueJ: 조건부 렌더링을 위한 요소 그룹화에 대한 vs 또는 관련Vue.js에서는 디렉티브를 사용하여 여러 요소를 조건부로 렌더링하는 경우 태그 안에 랩하여 여기에
설명된 대로 태그에 디렉티브를 적용할 수 있습니다.
그러나 여러
요소를 감싸는 태그에서도 동일한 작업을 수행할 수 있습니다.
오버 또는 기타 유사한 네이티브 HTML5
태그를 사용하면 퍼포먼스에 큰 이점이 있습니까?
퍼포먼스 변경은 없을 것 같습니다만,
큰 차이는 노드가 DOM 에 표시되지 않는 것입니다.
이는 특히 목록 항목, 테이블 행 등 부모에게 유효한 유일한 노드 유형인 자녀를 그룹화할 때 중요합니다.
이것은
유효합니다.
<ul>
<template v-if="something">
<li>Text</li>
<li>Text</li>
</template>
</ul>
이것은, 이하가 아닙니다.
질문이 꽤 오래됐다는 건 알지만 한 가지 더 알아냈어
divs를 사용하는 경우 - div는 DOM에 있지만 v-if가 false이고 일부 공백이 여백처럼 보일 수 있는 경우 비어 있습니다.
템플릿을 사용
하는 경우
- DOM에 아무것도
없고
표시
되지 않습니다참조URL : https://stackoverflow.com/questions/51995815/vuejs-template-vs-div-or-related-for-grouping-elements-for-conditional-rend
Vue.js에서는 디렉티브를 사용하여 여러 요소를 조건부로 렌더링하는 경우 태그 안에 랩하여 여기에
설명된 대로 태그에 디렉티브를 적용할 수 있습니다.
그러나 여러
요소를 감싸는 태그에서도 동일한 작업을 수행할 수 있습니다.
오버 또는 기타 유사한 네이티브 HTML5
태그를 사용하면 퍼포먼스에 큰 이점이 있습니까?
퍼포먼스 변경은 없을 것 같습니다만,
큰 차이는 노드가 DOM 에 표시되지 않는 것입니다.
이는 특히 목록 항목, 테이블 행 등 부모에게 유효한 유일한 노드 유형인 자녀를 그룹화할 때 중요합니다.
이것은
유효합니다.
<ul>
<template v-if="something">
<li>Text</li>
<li>Text</li>
</template>
</ul>
이것은, 이하가 아닙니다.
질문이 꽤 오래됐다는 건 알지만 한 가지 더 알아냈어
divs를 사용하는 경우 - div는 DOM에 있지만 v-if가 false이고 일부 공백이 여백처럼 보일 수 있는 경우 비어 있습니다.
템플릿을 사용
하는경우
-DOM에 아무것도
없고
표시
되지 않습니다참조URL : https://stackoverflow.com/questions/51995815/vuejs-template-vs-div-or-related-for-grouping-elements-for-conditional-rend
반응형
'programing' 카테고리의 다른 글
| 페이지 새로 고침 후 v-treeview 상태를 유지하는 방법 (0) | 2022.08.11 |
|---|---|
| getter에서 Vue 체인 여러 필터 (0) | 2022.08.11 |
| 최적화되지 않는 무한 빈 루프를 만들려면 어떻게 해야 합니까? (0) | 2022.08.11 |
| vue 앱 새로 고침: GET /path를 가져올 수 없음 (0) | 2022.08.10 |
| 여러 v-for 루프...다른 방법은 없을까? (0) | 2022.08.10 |