Vue에서 다중 조건부 렌더링을 달성하기 위해 v-if 및 v-else-if를 사용하는 방법

Vue는 단일 페이지 애플리케이션(SPA)을 구축하는 데 사용할 수 있을 뿐만 아니라 복잡한 사용자 인터페이스를 만드는 데에도 사용할 수 있는 매우 인기 있는 JavaScript 프레임워크입니다. Vue의 v-if 및 v-else-if 명령어는 조건부 렌더링 뷰에 대한 두 가지 중요한 명령어입니다. 이 기사에서는 이 두 명령어를 사용하여 다중 조건부 렌더링을 구현하는 방법을 소개합니다.

1. v-if 명령어 소개

v-if 명령어는 Vue에서 가장 일반적으로 사용되는 명령어 중 하나이며 표현식의 값을 기반으로 요소를 조건부로 렌더링하는 데 사용됩니다. 표현식이 true로 평가되면 요소가 렌더링되고, 그렇지 않으면 요소가 렌더링되지 않습니다.

예를 들어, 다음 코드는 v-if 명령을 사용하여 숫자가 10보다 큰지 확인하는 방법을 보여줍니다. 숫자가 10보다 크면 "10보다 큰 숫자"라는 레이블이 표시되고, 그렇지 않으면 레이블이 표시됩니다. 표시되지 않음:

<template>
  <div>
    <p v-if="num > 10">数字大于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 20
    }
  }
}
</script>

여기의 데이터( ) 메소드는 초기 값이 20인 num 속성을 포함하는 객체를 반환합니다. 따라서 렌더링 시 "num > 10"이라는 수식의 결과가 true로 판단되므로 레이블이 렌더링되며 레이블의 텍스트는 "10보다 큰 숫자"입니다.

2. v-else-if 명령 소개

v-else-if 명령은 조건부 렌더링 요소에도 사용됩니다. 표현식의 값을 기반으로 요소를 렌더링할지 여부를 결정하려면 v-if 지시문의 "후속 형제 요소"로 사용해야 합니다. 이전 v-if 지시문의 식이 false로 평가되면 v-else-if 지시문은 해당 식이 참인지 확인하고 참이면 요소를 렌더링합니다.

예를 들어, 다음 코드는 v-if 및 v-else-if 명령어를 사용하여 다중 조건부 렌더링을 구현하는 방법을 보여줍니다.

<template>
  <div>
    <p v-if="num > 30">数字大于30</p>
    <p v-else-if="num > 20">数字大于20</p>
    <p v-else-if="num > 10">数字大于10</p>
    <p v-else>数字小于等于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 15
    }
  }
}
</script>

여기에 숫자 num이 정의되어 있으며 초기 값은 15입니다. 여러 v-if 및 v-else-if 명령을 사용하여 num 값을 기반으로 레이블을 표시할지 여부를 결정합니다. 먼저 num이 30보다 큰지 확인합니다. 그렇다면 "30보다 큰 숫자"라는 레이블을 표시합니다. 그렇지 않으면 num이 20보다 큰지 확인합니다. 그렇다면 "20보다 큰 숫자"라는 레이블을 표시합니다.

이 예에서는 num 값이 15이므로 처음 두 조건은 충족되지 않지만 세 번째 조건은 충족되므로 "10보다 큰 숫자"라는 레이블이 렌더링됩니다.

3. 다중 조건부 렌더링 구현

여러 조건을 판단해야 하는 경우 v-if 및 v-else-if 명령어를 조합하여 다중 조건부 렌더링을 구현할 수 있습니다. 다음 코드는 v-if 및 v-else-if 지시어를 사용하여 다양한 조건에 따라 다양한 요소를 렌더링하는 방법을 보여줍니다.

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 75
    }
  }
}
</script>

이 예에서는 점수에 따라 다양한 텍스트가 표시됩니다. 점수가 90점 이상이면 "Excellent"가 표시되고, 점수가 80점 이상이면 "Good"이 표시되고, 점수가 60점 이상이면 "Pass"가 표시됩니다. "가 표시되고, 그렇지 않으면 "실패"가 표시됩니다.

4. 요약

v-if 및 v-else-if 명령은 Vue에서 매우 중요한 두 가지 명령으로 요소를 조건부로 렌더링하는 데 사용할 수 있습니다. 함께 사용하면 예제 코드처럼 다양한 조건에 따라 다양한 요소를 렌더링할 수 있습니다. 이 접근 방식을 사용하면 프로그램을 보다 명확하게 구성하고 유지 관리가 더 쉬워집니다.

위 내용은 Vue에서 다중 조건부 렌더링을 달성하기 위해 v-if 및 v-else-if를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!