Vue.js v-if & v-show

 

Thumbnail

 

디렉티브(directive)

 

Vue.js 엘리먼트의 특별한 속성!

 

 

v-if(v-else-if, v-else) & v-show

 

키 값이 true일때만 해당 엘리먼트를 나타나게 하는 디렉티브로 v-if와 v-show 둘다 결과는 같아 보이지만 v-show의 경우 값을 불러온 후 display: none 속성이 적용되므로 v-if의 경우가 더 효율적이다. 

 

 

    <div id="app"> 
       <h2>visible_true : true</h2>
        v-if : <h2 v-if="visible_true">{{msg}}</h2><br>
        v-show : <h2 v-show="visible_true">{{msg}}</h2>
        <hr>
        <h2>visible_false : false</h2><br>
        v-if : <h2 v-if="visible_false">{{msg}}</h2><br>
        v-show : <h2 v-show="visible_false">{{msg}}</h2>
    </div>
    var firstApp = new Vue({
        el : "#app",
        data : {
            msg: "안녕하세요. 뷰를 학습중입니다.",
            visible_true: true,  //키 값은 임의 작성가능
            visible_false: false //키 값은 임의 작성가능
        }
    })

See the Pen ZEOLRpq by junheeleeme (@junheeleeme) on CodePen.

 

v-show의 경우 결과에서는 보이지 않지만 개발자 도구에서는 확인가능하다.

 

 

저작자표시