0 votes
in VueJS by
How to use Conditionals and Loops and their syntax?

1 Answer

0 votes
by

It’s easy to toggle the presence of an element, too:<div id="app-3">

  <span v-if="seen">Now you see me</span>

</div>

var app3 = new Vue({

  el: '#app-3',

  data: {

    seen: true

  }

})

Now you see me

Go ahead and enter app3.seen = false in the console. You should see the message disappear.

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

There are quite a few other directives, each with its own special functionality. For example, the v-for directive can be used for displaying a list of items using the data from an Array:

<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: 'Learn JavaScript' },

      { text: 'Learn Vue' },

      { text: 'Build something awesome' }

    ]

  }

})

Learn JavaScript

Learn Vue

Build something awesome

In the console, enter app4.todos.push({ text: 'New item' }). You should see a new item appended to the list.

...