Range of numbers

The variable n is in scope inside the <li> tag. To prove it to yourself, you can quickly build a countdown list as follows:

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

We write 11 instead of 10 because enumeration in Vue is 1-indexed; this means that n in 10 will start to count from 1, not from 0 like someone might expect, and go up to 10. If we want our countdown to start from 10, then we have to put 11. The last number will be 10, so we'll have 1 as the last number before the missile is launched.

What v-for="n in 10" does is call enumeration; specifically we are enumerating a range of numbers (1 to 10).

Get Vue.js 2 Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.