[vue.js 2] v-if vs v-show 차이점과 예제 비교

v-if 와 v-show 차이점과 예제 비교

 

 

v-show

 

조건이 true일 때 해당 엘리먼트(태그같은거)를 DOM에서 실제로 추가하고, 조건이 false일 때 DOM에서 해당 엘리먼트를 제거합니다.

즉, v-if는 엘리먼트의 렌더링 자체를 제어합니다.

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="isVisible">이 내용은 조건이 true일 때만 보입니다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

 

 

 

v-show

 

조건이 true일 때 해당 엘리먼트를 보이게 하고, 조건이 false일 때는 숨깁니다. 하지만 DOM에서 제거되지는 않으며, display: none 스타일을 적용하며 화면에 보이지 않도록 만듭니다.

 

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="isVisible">이 내용은 조건이 true일 때 보이지만, DOM에서 사라지지 않습니다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>