v-if 와 v-show 성능 차이점

Vue에서 v-if와 v-show 디렉티브가 있습니다. 디렉티브란 라이브러리에서 DOM 엘리먼트가 무언가를 수행하도록 지시하는 특수한 속성입니다. v-if v-show 공통점 두 가지 모두 조건에 따라서 화면에 렌더링 할 수 있는 디렉티브입니다. 차이점 v-if 는 조건이 참이면 렌더링을 하고 거짓이면 아무 동작을 하지 않습니다. v-show는 조건에 따라서 display 속성을 이용하여 보이거나, 숨깁니다. 성능 차이 v-if는 실제로 화면을 렌더링을하고, 다시 지우고 해서 토글 비용이 높습니다. 반면에 v-show는 초기에 화면을 렌더링 할 때 비용이 높습니다. 무언가를 자주 토글을 해야하는 경우에는 v-show를 사용하고, 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용하는 것이 좋습니다..

• format_list_bulleted Develop/Vue
• · 2023. 7. 10.
• textsms

Vue 조건문 v-if v-else v-else-if

Vue에서 조건에 따라서 렌더링 할 수 있습니다. v-if v-else v-else-if 구문을 이용하면 됩니다. 직접 사용하면서 확인해 보겠습니다. v-if v-if문은 조건에 따라서 엘리먼트를 렌더링 할 수 있습니다. const App = { data() { return { score: 100 } } } 위 와 같이 score를 100으로 지정하고 A학점입니다. score가 90점 이상이면 렌더링 됩니다. v-else v-else는 v-if문의 조건이 아닌 경우에 렌더링 할 엘리먼트에 적용하면 됩니다. const App = { data() { return { score: 80 } } } score를 80으로 변경하고 A학점입니다. B학점 입니다. v-else가 타게 되어 B학점입니다. 표시됩니다. v..

• format_list_bulleted Develop/Vue
• · 2023. 4. 27.
• textsms