VUE条件与循环

VUE声明式渲染

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统：
HTML:

<div id="app">
  {{ message }}
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

然后页面显示就是

Hello Vue!

我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。我们如何知道？打开你的浏览器的控制台，并修改 app.message，你将看到上例相应地更新。

VUE条件与循环
如下控制切换一个元素的显示
HTML:

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

JS:

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

页面显示为：
Now you see me

继续在控制台设置 app3.seen = false，你会发现 “Now you see me” 消失了。
这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。而且，Vue.js 也提供一个强大的== 过渡效果==系统，可以在 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: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

页面显示为：

1. Learn JavaScript
2. Learn Vue
3. Build something awesome
   在控制台里，输入 app4.todos.push({ text: ‘New item’ })。你会发现列表中多了一栏新内容。