[VueJS] v-if 와 v-show

이 둘의 차이를 정말 간단하게 생각한다면 화면상에 보여준다, 안 보여준다 정도이지만

차이가 조금 더 있다.

 

v-if는 조건에 맞지 않으면 렌더링 자체가 안되거나, 조건을 충족해서 렌더링 되었다가 다시 바뀌면 엘리먼트가 삭제된다.

v-show는 렌더링은 되지만 조건에 따라 style: display:none;으로 화면상에서만 안 보이게 하고, 바뀌면 다시 보이게 한다.

 

테스트 소스

<template>
  <v-layout column>

    <v-flex class="ma-4">
      <v-row>
        <v-col cols="12">
          
          <v-card color="red">
            <v-card-text>AAA</v-card-text>
          </v-card>

          <v-card class="my-1" color="blue" v-if="is">
            <v-card-text>BBB</v-card-text>
          </v-card>

          <v-card color="purple">
            <v-card-text>CCC</v-card-text>
          </v-card>

        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12">
          <v-btn @click="is = !is">Button</v-btn>
        </v-col>
      </v-row>
    </v-flex>

  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      is : false
    }
  }
}
</script>

<style>

</style>

v-if

is 값이 true일 때 화면

v-card 3개가 모두 렌더링 되어 있는 상태

is의 값이 true여서 v-card가 다 보이는 상태이고 버튼을 눌러 is 값을 false로 바꾸면?

is 값이 false일 때 화면

가운데 v-card가 사라짐

화면에서도 사라졌고, 해당 v-card 엘리먼트도 사라졌다.

버튼 다시 눌렀을 때

버튼을 다시 누르면 사라져서 <!---->로 표시되던 부분에 다시 렌더링 된 모습을 볼 수 있다.

v-show

위 예제 소스에서 v-if를 v-show로 변경 후 테스트

is 값이 true일 때 화면

 

v-card 3개가 모두 렌더링 되어 있는 상태

버튼을 눌러서 is 값을 false로 변경하면 

is 값이 false 일 때 화면

v-if 때와는 다르게 렌더링 되어 있는 상태로 남아 있고 style=display: none;이 들어가서 화면에 안 보이게 된다.

버튼 다시 눌렀을 때

버튼을 다시 누르면 style에 들어 있는 값이 사라지며 화면에 보이게 된다.

 

---

이러한 차이 때문에 v-if와 v-show를 사용할 때 어떤 걸 사용해야 할지 생각해보고 만들어야 한다고 한다.

화면상에서 자주 바뀌는 거라면 v-show를, 아니라면 v-if를 권장한다는 글을 본 적이 있다.