Vue.js 2 Cookbook

How to do it...

In the previous recipe we built a list for a countdown for a missile launch:

<div id="app">   <ul>     <li v-for="n in countdown">{{n}}</li>     <li>launch missile!</li>   </ul> </div>

new Vue({  el:'#app',  data: {    countdown:       [10,9,8,7,6,5,4,3,2,1]  }})

Wouldn't it be great if it was animated? We can tweak the JavaScript to add numbers to countdown as seconds pass:

1. Copy the preceding code in the HTML and JavaScript sectors of JSFiddle, with the exception that we will fill the countdown ourselves, so set it to an empty array.

To get hold of the countdown variable we must pass the variable through the Vue instance itself.

2. Assign the Vue instance to a variable for later reference:

        var vm = new Vue({          el:'#app',          data: { countdown: ...