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")}}'
        }
      ]

Before we get into building our simple app and displaying our users, we'll cover some more of the features of Vue and the HTML-specific attributes available in your view. These range from dynamically rendering content to looping through arrays.