Vue 조건부 렌더링에 대한 실용 가이드: v-if, v-show, v-else, v-else-if 사용 기술에 대한 자세한 설명

Vue 조건부 렌더링 실용 가이드: v-if, v-show, v-else, v-else-if의 사용 기술에 대한 자세한 설명

Vue.js는 대화형 프론트를 구축하는 데 사용되는 오픈 소스 JavaScript입니다. end 인터페이스 다양한 조건에 따라 특정 요소를 표시하거나 숨기기 위한 유연한 조건부 렌더링 지침을 제공하는 프레임워크입니다. Vue에서 v-if, v-show, v-else, v-else-if는 일반적으로 사용되는 조건부 렌더링 명령 중 하나입니다. 이 문서에서는 이러한 지시문의 사용을 자세히 설명하고 해당 코드 예제를 제공합니다.

1. v-if 및 v-else

v-if 지시문은 조건에 따라 특정 요소를 렌더링하는 데 사용됩니다. 조건이 true이면 요소가 렌더링되고, 조건이 false이면 요소가 렌더링되지 않습니다.

예 1: l & lt; test & gt;

<h1 v-if="show">Hello, World!</h1>
<p v-else>Sorry, the element is hidden.</p>

& lt;/div & lt;
기본값 내보내기 a data () {

return {
  show: true
}

} }

위의 예에서 show 변수의 값에 따라 show가 true이면 "h1" 요소의 텍스트가 표시됩니다. show가 false이면 "p" 요소의 텍스트가 표시됩니다.

v-else 지시문은 v-if 뒤에 사용되며 동일한 태그 내에서 즉시 사용하여 v-if와 반대 조건을 표현할 수 있습니다.

예 2: l & lt; test & gt;

<h1 v-if="show">Hello, World!</h1>
<h3 v-else>Title</h3>

& lt;/div & lt;

& lt; {a data () {

return {
  show: true
}

} }

위의 예에서 show 값이 true인 경우 show 값이 false인 경우 "h1" 요소의 텍스트가 표시됩니다. , "h3" 요소의 텍스트가 표시됩니다.

v-show

v-show 명령은 v-if와 유사하며 특정 조건에서 요소의 표시 및 숨기기를 제어하는 ​​데에도 사용됩니다. 차이점은 v-show는 요소를 직접 삭제하거나 추가하는 대신 CSS의 표시 속성을 사용하여 요소의 표시 및 숨기기를 전환한다는 것입니다.

예 3: l & lt; 템플릿 & gt;

<h1 v-show="show">Hello, World!</h1>
<p v-show="!show">Sorry, the element is hidden.</p>

& lt;/div & lt;

& lt; a data () {

return {
  show: true
}

} }

위의 예에서 show 값이 true인 경우 show 값이 false인 경우 "h1" 요소의 텍스트가 표시됩니다. "p" 요소의 텍스트가 표시됩니다.

v-else-if

v-else-if 지시문은 v-else 지시문과 유사하지만 여러 연속 조건을 설정할 수 있습니다. v-if 지시문과 v-else 지시문을 사용할 때 매우 유용합니다.

예 4: l & lt; test & gt;

<h1 v-if="score >= 90">A+</h1>
<h2 v-else-if="score >= 80">A</h2>
<h3 v-else-if="score >= 70">B</h3>
<h4 v-else-if="score >= 60">C</h4>
<h5 v-else>F</h5>

& lt;/div & lt;

기본값 내보내기 a data () {

return {
  score: 85
}

} }

위의 예에서는 변수 점수 값에 따라 다양한 수준의 텍스트가 표시됩니다. 점수 값에 따라 먼저 90보다 크거나 같은지 확인합니다. 그렇다면 "h1" 요소에 텍스트를 표시하고, 그렇지 않으면 80보다 크거나 같은지 확인합니다. "h2" 요소의 텍스트 등입니다.

요약하자면, v-if, v-show, v-else, v-else-if는 Vue.js에서 일반적으로 사용되는 조건부 렌더링 명령어입니다. 실제 상황에 따라 원하는 효과를 얻기 위해 사용할 지시문을 선택하고 필요에 따라 요소를 표시하거나 숨길 수 있습니다. 코드를 작성할 때 이러한 명령어를 합리적으로 사용하면 코드 구조를 최적화하고 코드의 가독성과 유지 관리성을 향상시킬 수 있습니다. 이 글이 Vue 개발에 도움이 되길 바랍니다.

(참고: 위 예시 코드는 참고용이므로 사용 시 실제 상황에 맞게 수정하시기 바랍니다)

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