2

Displaying, Looping, Searching,

and Filtering Data

In Chapter 1, Getting Started with Vue.js, we covered the data, computed, and method

objects within Vue and how to display static data values. In this chapter, were are going to

cover:

Displaying lists and more complex data with Vue using v-if, v-else, and v-

for

Filtering the lists using form elements

Applying conditional CSS classes based on the data

The data we are going to be using is going to be randomly generated by the JSON generator
service (http:/​/​www.​json-​generator.​com/​). This website allows us to get dummy data to

practice with. The following template was used to generate the data we will be using. Copy

the following into the left-hand side to generate data of the same format so the attributes
match with the code examples, as follows:

[

'{{repeat(5)}}',

{

index: '{{index()}}',

guid: '{{guid()}}',

isActive: '{{bool()}}',

balance: '{{floating(1000, 4000, 2, "00.00")}}',

name: '{{firstName()}} {{surname()}}',

email: '{{email()}}',

registered: '{{date(new Date(2014, 0, 1), new Date(), "YYYY-

MM-ddThh:mm:ss")}}'

}

]