Vue 조건 v-show v-if

조건에 따라서 보여주고 보이지 않고 하는 로직을 넣고 싶은데요. 그때 사용할 수 있는 것이 v-show입니다.

toggle 변수에 ref 통해서 true 초기값을 할당하였습니다. true 보여줘에는 v-show를 통해서 toggle 변수가 true이면 보이고 toggle에 느낌표를 붙여서 true가 아니면 조건식이 나오도록 해서 false 보여줘 가 보이도록 했습니다. 

<template>
  <div class="container">
    <h2 v-show="toggle">true 보여줘</h2>
    <h2 v-show="!toggle">false 보여줘</h2>
    <button @click="onToggle" class="btn btn-primary">토글 버튼</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    
    const toggle = ref(true)

    const onToggle = () => {
      toggle.value = !toggle.value
    }

    return {
      toggle,
      onToggle      
    }
  }
}
</script>

v-show는 css style요을 통해서 보이고 안 보이고를 구현합니다. 똑같은 것을 v-if로 해보겠습니다.

<template>
  <div class="container">
    <h2 v-if="toggle">true 보여줘</h2>
    <h2 v-else>false 보여줘</h2>
    <button @click="onToggle" class="btn btn-primary">토글 버튼</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    
    const toggle = ref(true)

    const onToggle = () => {
      toggle.value = !toggle.value
    }

    return {
      toggle,
      onToggle      
    }
  }
}
</script>

v-if 두 번 사용할 수도 있고 v-else를 사용 할 수도 있습니다. v-if는 조건에 만족하는 것이 표시되어서 개발자 도구에서도 볼 수 없습니다. 스타일로 하는 것이 아니라 아예 없도록 합니다. 빈번하게 값이 바뀌는 경우에는 v-if를 사용하고 자주 바뀌는 값에 대해서는 v-show를 사용하는 것을 추천하고 있어요.