[Vue3] Stand Alone #2. v-if, v-else-if, v-else, v-show

Vuejs 3
if else

 

Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..),
홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다.
Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~

 

v-if 와 v-show 는 어떨때 써야할까?

<div v-if="counter % 2 == 0">
  짝수!
</div>
<div v-show="counter % 2 == 0">
  짝수!
</div>

이 두 코드는 보여지기에는 똑같습니다.

v-if 는 더 높은 토글비용. v-show는 더 높은 랜더링 비용. 으로 생각하면 되는데요.

햇갈릴 경우엔, 예전 jQuery 에서 show 와 hide 는 존재하는 객체에 적용할 수 있는거이기 때문에
'show 는 무조건 객체를 만들고 시작해야 하는구나, 그럼 초기에 랜더링 비용이 들겠네..' 라고 생각하면 될거같습니다.

그래서

• v-show 는 런타임 중 자주 토글되는것,
• v-if 는 그렇지 않은것에 쓰면 되겠습니다.

 

v-if

예제에는 버튼을 누르면 계속 toggle 되는데, 이럴땐 v-show를 써야 하지만, 예제이기 때문에 참고해서 봐주세요.

v-if 안에 expression 을 직접 작성 한 경우입니다.

<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
    <div>{{ counter }}</div>
    <div v-if="counter > 0">
        <div v-if="counter % 5 == 0">
            5의 배수
        </div>
        <div v-else-if="counter % 2 == 0">
            짝수
        </div>
        <div v-else>
            홀수
        </div>
    </div>
    <button @click="counter++">Count</button>
</div>

<script>
    var app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        }
    }).mount('#app')
</script>

실행하면,

v-if 에 변수를 입력 할 수도 있습니다.

<meta charset="utf-8">

<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
    <div>{{ counter }}</div>
    <div v-if="counter > 0">
        <div v-if="counter % 5 == 0">
            5의 배수
        </div>
        <div v-else-if="isEven">
            짝수
        </div>
        <div v-else>
            홀수
        </div>
    </div>
    <button @click="addCount">Count</button>
</div>

<script>
    var app = Vue.createApp({
        data() {
            return {
                counter: 0,
                isEven: false
            }
        },
        methods: {
            addCount(){
                this.counter++;
                this.isEven = (this.counter % 2 != 0);
            }
        },
    }).mount('#app')
</script>

<style>
    #app{
        width: 100%;
        text-align: center;
    }
</style>

 

v-show

    <div v-show="isEven">
        Odd
    </div>