[Vue.js 3] Transition 및 v-if

composition api에서 사용할 땐 reactive가 아닌 ref로 사용해야 v-if가 된다.

reactive와 ref의 차이점은 API 래퍼런스에서 각각의 내용을 보면 확인 가능하다.

 

코드는 Transition 복붙했다.

<template>
    <div class="main-box">
        <div class="monitor-box">
          <canvas></canvas>
        </div>
        <div class="option-box">
            <div class="channel-box">
              <button @click="showToggle = !showToggle">Cannel</button>
              <Transition>
                <p v-if="showToggle">hello</p>
              </Transition>
            </div>
            <div class="caption-box"></div>
            <div class="ptz-box"></div>
        </div>
    </div>
</template>

<script>
import { ref } from '@vue/reactivity';
export default {
    setup () {
        const showToggle = ref(false); // 변수 만들기
        return {
            showToggle
        };
    }
};
</script>

 

<style lang="scss">
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

클릭 시 오른쪽 처럼 hello가 보이게 됨