Vue.js 영화 App) class를 동적으로 추가하거나 삭제하기

1. Event.vue 만들기

2. 기본으로 만들기

<template>
    <div class="event">
        <p>{{ text }}</p>
        <button>X</button>
        
    </div>
</template>
<script>
export default {
    name: "EventComponent",
    props: {
        text: String,
        isEventOpen: Boolean
    }
    
}
</script>
<style>
.event {
    background: #444;
    color: #fff;
    padding: 10px 20px;
    text-align: center; /* 텍스트를 수평으로 가운데 정렬 */
    font-size: small;
    display: flex;
    justify-content: space-between; /* 플렉스 아이템을 양쪽 끝으로 배치 */
    align-items: center; /* 플렉스 아이템을 수직 가운데 정렬 */
}

.event p {
    margin: 0;
}

.event button {
    margin: 0;
}
</style>

• 컴포넌트 가져와서 화면에 보이기

<template>
  <div>
    <Navbar />

    <Event :text="text" />

    <Movies 
    :movies="movies" 
    @openModal="isModal=true;
    selectedMovie=$even"
    @incrementLike="incrementLike($event)" />

    <!-- 자식에게 변수 값 전달하기 -->
    <Modal 
    :movies="movies" 
    :isModal="isModal" 
    :selectedMovie="selectedMovie"
    @closeModal="isModal=false" />
   
  </div>
</template>

<script>
import movies from './assets/movies';
import Navbar from './components/Navbar.vue';
import Modal from './components/Modal.vue';
import Movies from './components/Movies.vue';
import Event from './components/Event.vue';

export default {
  name: 'App',
  data() {
    return {
      isModal: false,
      selectedMovie: null, 
      movies: movies,
      text: "Neplix 강렬한 운명의 드라마, 경기크리처"
    }
  },
  methods: {
    incrementLike(i) {
      this.movies[i].like++;
    },
    selectMovie(i) {
      this.selectedMovie = i;
      this.isModal = true;
    },
  },
  components: {
    Navbar: Navbar,
    Modal: Modal,
    Movies: Movies,
    Event: Event
  }  
}
</script>

3. X 버튼을 눌러서 이벤트 창 닫기

• 상태 변수가 필요함

• 보이지 않게 기본 값을 설정

<template>
    <div class="event" :class="{show : isOpen}"> <!--기본 값-->
        <p>{{ text }}</p>
        <button @click="isOpen=false">X</button>
        
    </div>
</template>
<script>
export default {
    name: "EventComponent",
    props: {
        text: String,
        isEventOpen: Boolean
    },
    data() {
        return{
            isOpen: true
        }
    }
}
</script>
<style>
.event {
    background: #444;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    font-size: small;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    display: none;/* 보이지 않게 기본 값을 설정 */
}

.show {
    display: flex;
}

.event p {
    margin: 0;
}

.event button {
    margin: 0;
}
</style>

• 기본 값을 true로 보이게 설정

<template>
    <div class="event" :class="{show : true}"> <!--기본 값-->
        <p>{{ text }}</p>
        <button>X</button>
        
    </div>
</template>
<script>
export default {
    name: "EventComponent",
    props: {
        text: String,
        isEventOpen: Boolean
    }
    
}
</script>