Vue.js 조건부 렌더링 및 V-if 대 V-show

제 글이 마음에 드셨다면 커피 사주시면 됩니다 :)
커피 사주세요

Vue.js 조건부 렌더링

v-if 및 v-show 지시어는 Vue.js에서 블록을 조건부로 렌더링하는 데 사용됩니다.

v-if

vue.js에서 v-if 지시어는 블록을 조건부로 렌더링하는 데 사용됩니다. 지시문의 표현식이 실제 값을 반환하는 경우에만 블록이 렌더링됩니다.

예 :

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="show">Vue.js</h1>
</template>

v-else 지시문을 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있습니다. v-if 지시어 표현식이 true를 반환하지 않으면 v-else 블록이 렌더링됩니다.

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="awesome"> v-if directive </h1>
    <h1 v-else> v-else directive </h1>
</template>

v-else-if

v-else-if는 v-if에 대한 "else if 블록" 역할을 합니다. 여러 번 연결될 수도 있습니다. v-if 및 v-else-if가 true로 평가되지 않으면 v-else 지시문이 트리거됩니다.

 <p v-if="currentState === 0">State 0: Message 1</p>
    <p v-else-if="currentState === 1">State 1: Message 2</p>
    <p v-else-if="currentState === 2">State 2: Message 3</p>
    <p v-else>State 3: Message 4</p>

V-쇼

조건부로 항목을 표시하려면 v-show 지시어를 또 다른 옵션으로 사용할 수 있습니다.

<h1 v-show="ok">Ok!</h1>

차이점은 v-show가 있는 요소는 항상 렌더링되어 DOM에 남아 있다는 것입니다. v-show는 CSS 표시 속성을 변경하여 요소를 표시하거나 숨깁니다. v-show는 v-else와 작동하지 않습니다

v-if 대 v-show

v-if는 토글 중에 조건부 블록 내부의 이벤트 리스너와 하위 구성 요소가 적절하게 삭제되고 다시 생성되도록 보장하기 때문에 "실제" 조건부 렌더링입니다.

v-if: 초기 렌더링 시 조건이 false이면 아무 작업도 수행하지 않습니다. 조건이 처음으로 true가 될 때까지 조건부 블록은 렌더링되지 않습니다.

v-show는 항상 렌더링되어 DOM에 남아 있습니다. v-show는 CSS 표시 속성을 변경하여 요소를 표시하거나 숨깁니다. v-show는 v-else와 작동하지 않습니다

v-if는 토글 비용이 더 높고 v-show는 초기 렌더링 비용이 더 높습니다. 매우 자주 전환해야 하는 경우 v-show를 선호하고, 런타임 시 조건이 변경될 가능성이 없는 경우 v-if를 선호합니다.

결론

이 글에서는 v-if와 v-show 지시어의 특징과 차이점을 살펴보았습니다. Vue.js 애플리케이션

에서 렌더링 성능을 최적화하고 요소 가시성을 관리하려면 이러한 차이점을 이해하는 것이 필수적입니다.

위 내용은 Vue.js 조건부 렌더링 및 V-if 대 V-show의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!