[Vue] 모달창 만들기 (feat, 조건문)

v-if사용법 메뉴얼

https://kr.vuejs.org/v2/guide/conditional.html

조건부 렌더링 — Vue.js

 

HTML 코드

 <div class="blackBg">
    <div class="whiteBg">
      <h4>상세페이지</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><button>닫기</button>
    </div>
  </div>

style

body {margin: 0;}
div {box-sizing: border-box;}
.blackBg {width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; padding: 20px;}
.whiteBg {width: 100%; background: rgba(255,255,255,1); border-radius: 8px; padding: 20px;}

 

 

.blackBg에는 v-if문을 통해 모달창이 false일 경우 none, true 일 경우 block 처리한다.

 

.balckBg의 v-if문을 통해 modalOpen이 조건식과 같이 않을 경우 모달창이 보여진다.

반대로 닫기 버튼을 눌렀을 경우(false = flase)이므로 해당 조건과 부합해 닫혀짐.

 

v-if작성 예제

v-if="조건식"
조건식 안에는 "a === b" 인지? 등 비교연산자, 부등호 등을 넣을 수 있다.

 

사진의 메인 설명을 클릭했을때 true이며, blackBg의 조건도 true일 경우 나타난다.

 

이미지 하단의 메인 제목을 눌렀을 경우 모달창이 나오는데 그것이 true일 때 blackBg가 나타난다.

 

반대로 닫기 버튼을 누를 경우 true가 아니면 닫히게 만든다.