vue.js 모달, 탭, 햄버거 등등 만들기 v-if

탭, 햄버거, 모달창 다 같은 로직이다

 

export default {
  name: 'App',
  data(){
    return {
      모달창열렸니 : false,
      
      
        <div class="black-bg" v-if="모달창열렸니">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지임 </p>
    </div>
  </div>

 

div에 v-if 조건식을 달면 true면 html이 보이고 false면 안보인다.

 

<h4 @click="모달창열렸니 = true">{{ products[0] }} 원룸</h4>

열때는 클릭시에 true

 

  <button @click="모달창열렸니 = false">닫기</button>