집 >웹 프론트엔드 >JS 튜토리얼 >vue에서 v-if와 v-show의 차이점에 대한 자세한 설명

vue에서 v-if와 v-show의 차이점에 대한 자세한 설명

小云云원래의: 2018-02-05 13:14:551501검색

이 글은 주로 vue 스터디 노트에서 v-if와 v-show의 차이점을 소개하고 있습니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

v-if 대 v-show

v-if는 "true" 조건부 렌더링입니다. 이는 조건부 블록 내의 이벤트 리스너와 하위 구성 요소가 전환 중에 적절하게 삭제되고 다시 생성되도록 보장하기 때문입니다.

v-if도 게으릅니다. 초기 렌더링에서 조건이 false이면 아무 작업도 수행되지 않습니다. 조건이 처음으로 true가 될 때까지 조건부 블록은 렌더링되지 않습니다.

이에 비해 v-show는 훨씬 간단합니다. 요소는 초기 조건에 관계없이 항상 렌더링되며 CSS를 기반으로 간단히 전환됩니다.

일반적으로 v-if의 전환 오버헤드가 더 높고, v-show의 초기 렌더링 오버헤드가 더 높습니다. 따라서 매우 자주 전환해야 하는 경우에는 v-show가 더 좋으며, 런타임 시 조건이 변경될 가능성이 없으면 v-if가 더 좋습니다.

<template>
  <p id="app">
    <p v-if="isIf">
      if
    </p>
    <p v-show="ifShow">
      show
    </p>
    <button @click="toggleShow">toggle</button>
  </p>
</template>

<script>
  export default {
    name: &#39;app&#39;,
    data() {
      return {
        isIf : true,
        ifShow : true,
        loginType : "username"
      }
    },
    methods: {
      toggleShow : function(){
        this.ifShow = this.ifShow ? false : true;
        this.isIf = this.isIf ? false : true;
      }
    }
  }
</script>

크롬 콘솔을 보시면 더 확실하게 알 수 있습니다

비교해보면 v-if는 코드에서 직접 삭제되고, v-show는 디스플레이를 통해서만 상태를 전환하므로 권장합니다 자주 전환하는 경우 v-show를 사용하는 것이 좋습니다.

vue에서 v-if와 v-show의 차이점에 대한 자세한 설명

관련 기사