VueJS day6

조건부 렌더링

V-if

v-if는 조건에 따라 블록을 렌더링하기 위해 사용한다.

<p v-if="속성명">출력할 구문</p>

이렇게 속성명을 부여하고

 var app = new Vue({
     el: '#app',
     data: {
     	속성명: true
     }
 })

속성명을 true로 할 경우, 렌더링되고 false일 경우 렌더링이 중지된다.

<div id="app">
    <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        seen: true
    }
})

v-else

v-else를 사용하면 else 블록을 나타낼 수 있다.

<div id="app">
    <p v-if="show">Yes</p>
    <p v-else>No</p>
    <button @click="toggleShow">Toggle</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        show: true
    },
    methods:{
        toggleShow(){ 
            this.show = !this.show; // 메소드로 토글의 형태를 만들어줌. 
        }
    }
})

toggleShow메소드 실행전

toggleShow메소드 실행후

V-show

v-show는 v-if와 기능이 거의 동일하다.

<div id="app">
    <div v-show="show">Yes</div>
    <button @click="Toggle">Toggle</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        show: false
    },
    methods:{
        Toggle(){
            this.show = !this.show;
        }
    }
})

Toggle메소드 실행전

Toggle메소드 실행후

v-if와 v-show의 차이

v-if는 조건 블록이 처음으로 참이 될때까지 렌더링 되지 않는다.

v-show는 v-if에 비해 훨씬 단순하여 CSS 기반 토글만으로 초기 조건에 관계없이 요소가 항상 렌더링 된다.

일반적으로 v-if는 토글 비용이 높고, v-show는 초기 렌더링 비용이 높다. 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장한다.