Vue 조건부 렌더링 기술 공개: 유연한 제어를 위해 v-if, v-show, v-else, v-else-if 사용 방법 배우기

Vue 조건부 렌더링 기술 공개: v-if, v-show, v-else, v-else-if를 사용하여 유연한 제어를 달성하려면 특정 코드 예제가 필요합니다.

Vue에서 조건부 렌더링은 매우 중요한 작업 중요한 기술로, 특정 조건에 따라 구성요소나 요소의 표시 및 숨기기를 제어할 수 있습니다. Vue는 v-if, v-show, v-else, v-else-if 등을 포함한 다양한 조건부 렌더링 지침을 제공합니다. 이 기사에서는 이러한 지침의 사용 기술을 자세히 살펴보고 특정 코드 예제를 제공합니다.

1. v-if 명령어
   v-if 명령어는 표현식의 값에 따라 특정 구성 요소나 요소를 렌더링할지 여부를 결정할 수 있습니다. 표현식의 값이 true이면 해당 콘텐츠가 렌더링되고, 표현식의 값이 false이면 해당 콘텐츠가 렌더링되지 않습니다. 예는 다음과 같습니다.

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

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

이 예에서는 v-if 지시어를 사용하여 showHeading 값에 따라 제목을 표시할지 여부를 결정합니다. showHeading 값이 true이면 제목이 렌더링되고, showHeading 값이 false이면 숨겨진 제목이 있는 단락이 렌더링됩니다.

2. v-show 명령
   v-show 명령은 v-if 명령과 비슷한 기능을 가지고 있으며 표현식의 값에 따라 구성 요소나 요소의 표시 및 숨기기를 제어할 수도 있습니다. v-if와 달리 v-show는 조건에 따라 DOM 요소를 추가하거나 제거하지 않고 CSS 스타일을 통해 요소의 표시 및 숨기기를 제어합니다. 예는 다음과 같습니다.

<template>
  <div>
    <h1 v-show="showHeading">显示标题</h1>
    <p v-show="!showHeading">隐藏标题</p>
  </div>
</template>

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

이 예에서는 v-show 명령을 사용하여 showHeading 값에 따라 제목 표시 및 숨기기를 제어합니다. v-if와 비교할 때 v-show의 논리는 CSS 스타일을 통해 요소의 표시 및 숨기기만 제어하므로 더 간단합니다.

3. v-else 지시어
   v-if 또는 v-show 지시어와 반대되는 조건을 표현하려면 v-else 지시어를 v-if 또는 v-show 지시어와 함께 사용해야 합니다. 예는 다음과 같습니다.

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

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

이 예에서 showHeading 값이 true이면 표시된 제목이 있는 요소가 렌더링되고, showHeading 값이 false이면 숨겨진 제목이 있는 단락이 렌더링됩니다. .

4. v-else-if 명령어
   v-else-if 명령어는 v-if 또는 v-show 명령어와 함께 사용하여 여러 조건에 대한 판단을 표현해야 합니다. 여러 v-else if 문을 대체하는 데 사용할 수 있습니다. 예는 다음과 같습니다.

<template>
  <div>
    <h1 v-if="rating >= 9">优秀</h1>
    <h2 v-else-if="rating >= 6">良好</h2>
    <h3 v-else-if="rating >= 3">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 8
    };
  }
};
</script>

이 예에서는 등급 값을 기반으로 v-if 및 v-else-if 명령어를 사용하여 등급 수준을 결정하고 그에 따라 다양한 제목을 렌더링합니다. 등급 값이 9 이상이면 우수한 제목이 렌더링되고, 등급 값이 6 이상이면 좋은 제목이 렌더링됩니다. 합격 타이틀이 렌더링되고, 등급 값이 3보다 크거나 같으면 합격 타이틀이 렌더링됩니다. 값이 3보다 작으면 자격을 갖추지 못한 타이틀이 렌더링됩니다.

요약:
v-if, v-show, v-else 및 v-else-if와 같은 조건부 렌더링 명령을 학습하고 사용함으로써 조건에 따라 구성 요소와 요소의 표시 및 숨기기를 유연하게 제어할 수 있습니다. 특정 비즈니스 요구 사항에 따라 조건부 렌더링을 구현하기 위한 적절한 지침을 선택하면 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다. 이 기사에 제공된 코드 예제가 Vue의 조건부 렌더링 기술을 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 Vue 조건부 렌더링 기술 공개: 유연한 제어를 위해 v-if, v-show, v-else, v-else-if 사용 방법 배우기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!