Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 리액트
- objective-c
- c언어
- 개발
- tmap연동
- const
- 스위프트
- HTML
- JavaScript
- react
- 설치
- UIApplication
- 코딩
- SWIFT
- forntend
- 상수
- Java
- 연산자
- tmapAPI
- 웹개발
- Vue.js
- 프론트엔드
- vue2.0
- 자바스크립트
- 조건문
- 티맵연동
- ios
- 다른앱호출
- C
- 자바
Archives
- Today
- Total
스펜서 개발블로그
[Vue.js] 조건문(v-if, v-show) 본문
조건문
Vue.js에서 조건문은 명시한 조건에 충족할 때 해당 태그를 포함한 하위 태그를 모두 보여주고 실행할 함수나 데이터 바인딩이 있다면 이를 수행한다.
종류
v-if
v-if의 경우, if문의 결과가 true일 때 해당 태그를 화면에 보여주고 혹시 함수가 있다면 함수를 호출하여 실행한다.
사용자의 분류 코드에 따라 화면을 다르게 구성하거나 모달(modal)창을 띄울 때 사용하기도 한다.
v-if를 사용하면 뒤에 v-else-if와 v-else도 함께 사용한다.
v-if는 조건에 충족하지 않을 경우, 랜더링을 하지 않기 때문에 DOM에 남아있지 않으며, 주로 자주 바뀌지 않는 부분에 사용된다.
<div>
<div class="link" v-if="isCustomer">
<a>프로모션 링크</a>
</div>
<div class="link" v-else>
<a>관리 링크</a>
</div>
</div>
export default {
name: 'App',
data() {
return {
isCustomer: true,
}
}
</script>
위와 같이 v-if로 boolean 타입의 변수를 넣어주거나 true 혹은 false로 반환될 수 있는 식을 사용하면 해당 div태그부터 하위까지 모두 조건에 포함되어 아래와 같은 결과가 나타난다.
v-show
v-show는 특정 조건을 만족할 때 해당 부분을 보여주고, 만족하지 않으면 해당 부분을 보여주지 않는다. 입력한 조건의 일치여부 실시간으로 표시하는 등의 경우에 사용된다.
v-show는 코드가 실행되면 랜더링하여 DOM에 있는 상태에서 보여지는 상태만 변경하는 방식으로 동작한다. (html의 display 속성을 변경함)
위 v-if문 코드에서 v-show를 사용하여 고객들에게만 보여줄 메시지를 아래와 같이 작성해보았다.
<div v-show="isCustomer">
"환영합니다."
</div>
읽어주셔서 감사합니다.
'Front-End > Vue.js' 카테고리의 다른 글
[Vue.js] Vue 프로젝트 생성할때 TypeScript 적용하기 (0) | 2023.02.27 |
---|
Comments