Vue 조건부 렌더링의 비밀병기: v-if, v-show, v-else, v-else-if 사용법 및 효과 비교에 대한 자세한 설명

Vue 조건부 렌더링의 비밀 무기: 인기 있는 프론트엔드 프레임워크인 v-if, v-show, v-else, v-else-if

Vue의 사용법과 효과 비교에 대한 자세한 설명, 뷰 표시 및 숨기기를 제어할 수 있는 풍부한 도구와 명령을 제공합니다. Vue에서 조건부 렌더링은 다양한 조건에 따라 요소를 표시할지 숨길지를 결정하는 데 사용되는 일반적인 작업입니다. 이 기사에서는 Vue의 조건부 렌더링 지침(v-if, v-show, v-else, v-else-if)에 대해 자세히 설명하고 사용법과 효과를 비교합니다. 동시에 독자가 이러한 지침의 적용 시나리오를 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공할 것입니다.

1. v-if 지시문
   v-if 지시문은 Vue에서 가장 일반적으로 사용되는 조건부 렌더링 지침 중 하나입니다. 지정된 조건에 따라 요소를 렌더링할지 여부를 결정합니다. 조건이 true이면 요소가 DOM으로 렌더링되고, 그렇지 않으면 DOM에서 제거됩니다. v-if 명령은 전환 오버헤드가 높으며 조건이 변경되면 요소를 다시 생성하거나 파괴합니다.

다음은 v-if 지시문을 사용하는 예입니다.

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

위 예에서 isShow가 true일 때 단락 요소는 isShow가 false일 때 DOM으로 렌더링됩니다. DOM 제거.

2. v-show 명령
   v-show 명령은 v-if 명령과 유사하며 둘 다 조건부 렌더링에 사용되지만 둘 사이에는 약간의 차이점이 있습니다. v-show 명령은 요소의 CSS 표시 속성을 수정하여 요소의 표시 및 숨기기를 제어합니다. 조건이 true이면 요소가 표시되고, 조건이 false이면 요소가 숨겨집니다. v-if와 달리 v-show 명령어는 전환 오버헤드가 적습니다. 요소의 표시 속성만 변경하고 실제로 요소를 생성하거나 삭제하지는 않습니다.

다음은 v-show 지시문을 사용하는 예입니다.

<template>
  <div>
    <p v-show="isShow">这是一个使用v-show指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

위 예에서 isShow가 true이면 단락 요소가 표시되고 isShow가 false이면 단락 요소가 숨겨집니다.

3. v-else 명령
   v-else 명령은 v-if 또는 v-show 명령과 함께 사용됩니다. 이는 현재 요소가 이전 요소의 "부정"임을 의미합니다. v-else 지시문은 v-if 또는 v-show 지시문 뒤에야 하며 매개변수나 표현식을 가질 수 없습니다.

다음은 v-else 지시문을 사용하는 예입니다.

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
    <p v-else>这是一个使用v-else指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

위 예에서 isShow가 true인 경우 첫 번째 단락 요소는 isShow가 false인 경우 DOM으로 렌더링되고 두 번째 Paragraph 요소는 다음과 같습니다. DOM으로 렌더링됩니다.

4. v-else-if 명령
   v-else-if 명령은 v-if 또는 v-show 명령과 함께 사용됩니다. 현재 요소는 "이전 요소의 부정과 다른 조건의 긍정"이라는 뜻이다. v-else-if 지시문은 v-if 또는 v-show 지시문 다음에야 하며 하나의 매개변수 또는 표현식을 가질 수 있습니다.

다음은 v-else-if 지시문을 사용하는 예입니다.

<template>
  <div>
    <p v-if="type === 'A'">这是类型A的示例</p>
    <p v-else-if="type === 'B'">这是类型B的示例</p>
    <p v-else>这是其他类型的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A',
    };
  },
};
</script>

위 예에서는 유형의 다양한 값에 따라 다양한 단락 요소가 DOM에 렌더링됩니다. 유형이 'A'이면 첫 번째 단락 요소가 렌더링되고, 유형이 'B'이면 두 번째 단락 요소가 렌더링되고, 유형이 다른 값이면 세 번째 단락 요소가 렌더링됩니다.

요약하자면, v-if, v-show, v-else, v-else-if는 Vue에서 일반적으로 사용되는 조건부 렌더링 명령어입니다. 모두 고유한 장점과 적용 가능한 시나리오가 있습니다. 요소의 표시 및 숨기기를 자주 전환해야 하고 렌더링 오버헤드가 상대적으로 작은 경우, 다른 조건에 따라 요소를 동적으로 생성하거나 삭제해야 하거나 전환 오버헤드가 큰 경우 v-show 명령어를 사용할 수 있습니다. , v-if 명령어를 사용할 수 있습니다. 여러 조건을 기반으로 다양한 요소를 렌더링해야 하는 경우 v-if의 조건이 충족될 때 일부 기본 요소를 렌더링해야 하는 경우 v-else-if 지시문을 사용할 수 있습니다. 또는 v-show 지시어가 충족되지 않으면 v-else 지시어를 사용할 수 있습니다.

이 글의 소개를 통해 독자들이 Vue의 조건부 렌더링 지침을 더 잘 이해하고 적용할 수 있기를 바라며, 특정 요구에 따라 뷰 표시 및 숨기기를 제어하는 ​​적절한 지침을 선택할 수 있기를 바랍니다.

위 내용은 Vue 조건부 렌더링의 비밀병기: v-if, v-show, v-else, v-else-if 사용법 및 효과 비교에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!