条件与循环

条件判断

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，你会发现 “现在你看到我了” 消失了。

循环

<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: '新项目' })，你会发现列表中添加了一个新项。