5. Vue js - v-if(조건식)

ㅁ v-if 사용예

ㅇ 기능설명 : 클릭 했을때 모달창 보여주고 클릭했을때 모달창 닫기

---

<template>  

  <div class="modal_box" v-if="현재상태저장데이터 == true">    <!-- v-if(조건식) 조건 맞을때 참(true) 거짓(false)-->

        <h4>상세 페이지</h4>

        <p>상세 페이지 내용</p>    

  </div>  

<br>

</template>

<script>

export default {

  name: 'App',  

  data() {

    return {            

      현재상태저장데이터 : true,   //  1. v-if 상태 저장 데이터 o, 1 or ture, false      

    }

  },  

}

</script>

<style>

body {

  text-align: center;

}

/* 모달창 css */

.modal_box{   

  width: 100%;

  height: 100%;

  background-color: cadetblue;

  border-radius: 5px;

  padding: 20px;

}

</style>

---

<!-- v-if(조건식) 조건 맞을때 참(true) 거짓(false)-->

<div class="modal_box" v-if="현재상태저장데이터 == true">

현재상태저장데이터 : true,   //  1. v-if 상태 저장 데이터 o, 1 or ture, false      

v-if="현재상태저장데이터 == true" 면 보이고 false 면 안보임

오ㅐ?

현재상태저장데이터 : true, 의 조건이 맞아야 보임, false 면 처음 저장해둔 상태값과 다르기 때문에 안보임 ㅇㅋ?

---

ㅁ 응용 모달창 열고 닫기

<template>  

  <div class="modal_box" v-if="현재상태저장데이터 == true">    <!-- 2. v-if(조건식) 조건 맞을때 참(true) 거짓(false)-->

        <h4>상세 페이지</h4>

        <p>상세 페이지 내용</p>

        <button @click="현재상태저장데이터 = false">닫기</button>

        <!-- 4. 현재상태저장데이터 : true 기본값에서 클릭 했을때 false 값으로 변경 조건식 맞기 때문에 모달창 닫힘  -->

  </div>    

  <div @click="현재상태저장데이터 = true">모달창 열기</div>

  <!-- 3. 현재상태저장데이터 : false 기본값에서 클릭 했을때 true 값으로 변경 조건식 맞기 때문에 모달창 열림  -->

<br>

</template>

<script>

export default {

  name: 'App',  

  data() {

    return {            

      현재상태저장데이터 : false,   //  1. v-if 상태 저장 데이터 0, 1 or ture, false      

    }

  },  

}

</script>

<style>

body {

  text-align: center;

}

/* 모달창 css */

.modal_box{   

  width: 100%;

  height: 100%;

  background-color: cadetblue;

  border-radius: 5px;

  padding: 20px;

}

</style>

---

ㅁ 결론

현재 저장된 상태값만 변경하면 동작함