Vue.js 2 Cookbook

Range of numbers

To start off with lists, set up your JSFiddle like in the preceding recipe, adding Vue.js as a framework. Select Vue 2.2.1 (or Vue (edge)):

1. In the JavaScript section, write:

        new Vue({el:'#app'})

2. And in the HTML write:

        <div id="app">           <ul>             <li v-for="n in 4">Hello!</li>           </ul>         </div>

This will result in a list with Hello! written four times. In a few seconds your first list is complete, nice job!

We can write a countdown with this technique--in the HTML, replace the content of the <div> with the following:

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