Vue conditions cycle

A display control of the switching element is quite simple:

<div id="app-3">
  <p v-if="seen">现在你看到我了</p> </div>

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

Now you see me

Continues console input  app3.seen = false, you will find the message that is displayed before disappeared.

This example demonstrates that we not only can bind data to text or DOM attribute, you can also bind to the DOM structure. In addition, Vue also offers a powerful system of transition effects, you can insert / update / remove automatically applied when elements in Vue transition effects .

There are many other commands, each with a special function. For example, the v-for instructions can bind an array of data to render a list of items:

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

var app4 = new Vue({
  el: '#app-4',
  data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } })

1. Learning JavaScript
2. Learn Vue
3. Whole cow project

In the console, enter  app4.todos.push({ text: '新项目' }), you will find a list of the last added a new project.