v-if, v-show, v-else 및 v-else-if가 있는 Vue의 조건부 렌더링/표시

개요

Vue.js는 동적 웹 인터페이스를 생성하고 단일 페이지 앱(SPA). 우리는 이러한 앱을 만들면서 종종 다음과 같은 작업을 하고 싶습니다. 특정 기준에 따라 무언가를 렌더링하다 – 이것이 조건부 렌더링의 핵심입니다.

조건부 렌더링은 조건이 true인지 아닌지에 따라 고유한 사용자 인터페이스(UI) 마크업을 렌더링하는 기능을 의미합니다. 이 개념은 구성 요소 표시 또는 숨기기(토글), 애플리케이션 기능 전환, 인증 및 권한 부여 처리 등과 같은 컨텍스트에서 자주 사용됩니다.

이 기사에서는 Vue.js에서 조건부로 렌더링하는 다양한 방법을 살펴보겠습니다. v-if, v-else-if및 v-else 지시문. 또한 몇 가지 예를 살펴보고 두 제품 간의 차이점을 강조하겠습니다. v-if 및 v-show.

v-if

XNUMXD덴탈의 v-if 지시어는 다음과 같은 데 사용됩니다. 조건부로 블록 렌더링 블록을 의미합니다. v-if 속성은 생산 지시문의 표현식이 다음을 반환하는 경우 true 값. 표현식이 잘못된 결과를 생성하는 경우(예: null, 0, 빈 문자열, false), 요소는 삭제 된 DOM에서.

실제 사례에서 이 동작을 설명해 보겠습니다.

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

이후 login 가 trueWalk Through California 프로그램, <div> 포함하는 블록 v-if 지시문이 생성되어 표시됩니다.

v-if vs V-쇼

그것은 주목할 가치가있다. v-show 위의 예에서도 작동하며 겉으로는 동일하게 작동하지만 둘 사이에는 차이가 있습니다.

v-if 조건부로 렌더링 요소인 반면 v-show 조건부로 표시/표시 요소.

이는 조건문이 토글될 때, v-if 실제로 구성 요소를 삭제하고 복원합니다. v-show 단지 보이지 않게 하거나 보이게 할 뿐입니다. 다음 애니메이션은 방법을 보여줍니다. v-if 실제로 코드 블록을 삭제하고 재생합니다.

한편, v-show 항상 DOM의 요소를 유지하고 CSS를 변경하여 모양을 전환합니다(설정을 통해). display 에 none):

v-else

XNUMXD덴탈의 v-else 지시어는 v-if 사용자 정의할 수 있는 지시문 false 조건부 렌더링의 값. 그렇지 않은 경우 true, 당신이 사용할 수있는 v-else 대신에 무슨 일이 일어나야 하는지 정의합니다.

예를 들어, 비밀번호를 입력했는데 오류 메시지를 생성하길 원한다고 가정해 보겠습니다. "약한 암호", 입력 길이가 6보다 작거나 표시되는 경우 “강력한 비밀번호” 길이가 6보다 큰 경우.

이것은 거짓 사례를 처리하기 위한 옵션이 있는 조건부 렌더링입니다.

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

이를 활용하여 간단한 로그인 페이지의 콘텐츠를 전환하여 사용자의 로그인 여부에 따라 메시지를 변경해 보겠습니다. 이에 따라 버튼 문구를 수정하겠습니다. userLoggedIn 상태도:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

버튼의 클릭 이벤트는 userLoggedIn 데이터 항목이며 이는 아래와 같이 표시되는 데이터에 영향을 미칩니다.

v-else-if

v-else-if extends a v-if 과 else...if 차단하다. 이는 자바스크립트와 유사하다. else...if 기존 구문에 if 문을 추가할 수 있다는 점에서 블록입니다. v-if. 이는 확인할 기준이 많고 여러 번 연결될 수 있는 경우에 사용됩니다.

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

결론

이 기사에서는 다음을 사용하여 요소를 조건부로 렌더링하는 방법을 살펴보았습니다. v-if, v-else및 v-else-if. 우리는 또한 v-if 및 v-show.

• 코인스마트. 유럽 ​​최고의 비트코인 ​​및 암호화폐 거래소.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 무료 액세스.
• 크립토호크. 알트코인 레이더. 무료 시험판.
• 출처: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/