조건문과 반복문

엘리먼트의 존재 여부를 토글하는 것은 아주 간단합니다.

HTML 부분

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

JS 부분

var app3 = new Vue({
    el : "#app-3", 
    data : {
    seen : true
    }
})

계속해서, app3.seen = false를 콘솔에 입력하세요. 메시지가 사라지는 것을 확인해야 합니다.

이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공합니다.

몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for디렉티브는 배열의 데이터를 사용해 항목 목록을 표시하는데 사용할 수 있습니다.

HTML 부분
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
        {{todo.text}}
        </li>
    </ol>
</div>

JS부분
var app4 = new Vue({
    el : "#app-4",
    data : {
        todos : [
        {text : "javascript 배우기"},
        {text : "Vue 배우기"},
        {text : "무언가 멋진 것을 만들기"}
        ]
    }
})

콘솔에서, app4.todos.push({ text: 'New item' })을 입력하십시오.
목록에 새 항목이 추가되어야 합니다.