조건문(v-if)

Vue에서 조건문의 사용은 간단 합니다.

html 엘리먼트에서 "v-if = ' ' "를 사용하면 디렉티브한 화면을 만들 수가 있습니다.

index.html 기본 페이지에 아래와 같이 추가 합니다.

<div id="app">
    <p v-if = "seen">제가 보이시나요?</p>
</div>

main.js에 아래와 같이 추가 해보세요

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

main.js안에 있는 "seen" data 값이 false이므로 index.html내에 있는  <p> 태그안의 v-if 값은 false가 되어 화면에 나타나지 않습니다. 

하지만, main.js내의 "seen"의 값을 true로 변경을 하고 저장을 하면

webpage의 화면은 아래와같이 글자가 나타나는게 보입니다.

false와 true로 바꾸어서 저장해가면서 webpage에서 변하는 내용을 확인해보세요!

 

다음 글에서는 반복문에 대하여 알아보겠습니다.