v-if vs v-show #2307

#뷰 템플릿(Template)

 

 HTML, CSS 등 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성

 

 

1. 뷰템플릿안에서 {{}}를 이용하여 데이터를 연결

2. 디렉티브(Directive) HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미

 

이 디렉티브에 v-if 와 v-show가 있다. 

v-if와 v-show는 조건의 참거짓에 따라 그 요소를 표시하거나 표시하지 않거나 컨트롤 할 수 있다.

차이점은 v-show는 요소가 항상 DOM에 유지된다는 점 이다.

v-show는 css를 제어하므로 조건이 거짓일 경우 display:none을 반환한다. 

그렇다고 참일때 block을 반환하지는 않는다.

 

따라서 v-show를 templete같은 뷰 속성에 쓰면 신기하게도 아무일도 일어나지 않는다..!

v-if 조건과 v-show 조건을 같이 쓴적이 있었는대

작동이 되긴하나 이방법으로 해도 되는지 의문이다..(아시는 분이 있다면 댓글 부탁합니다.)

나의 경우는 template에 v-if를 쓰고 아래 html태그에 v-show로 작업을 하였다.

 

이거때문에 또 하나 깨우치고 가는 하루이다..!