[Vue.js] if (1)

if 예제1)

v-if 속성은 문서 객체를 생성할지 없앨지를 결정한다 ( 추가, 제거)

v-show 속성은 문서 객체를 보여줄지 숨길지를 결정한다 

 

box3 는 체크박스를 클릭하면 true, false 값에 따라서 문서객체가 추가/제거 되는 속성의 코드이고box6 는 체크박스를 클릭하면 true, false 값에 따라서 문서객체가 눈에 보일지 말지를 결정하는 코드이다.

 

체크박스가 해제 상태인경우에는 box3의 div 요소가 아예 나타나지 않지만

box6 같은경우엔 코드로 보면 보이지만 실제 구현된 페이지에서만 나타나지 않는다.

 

 

체크박스를 클릭하여 isMake, isShow 값이 true 로 바뀌니

box3 요소의 코드가 나타나고 화면상에도 정상 구현되었고

box6 요소는 style 속성의 display none 값이 사라져 화면상에 구현되어 보여진다.