Vue allows you to use HTML tags and attributes to control and alter the view of your application. This involves setting attributes dynamically, such as alt and href. It also allows you to render tags and components based on data in the application. These attributes begin with a v- and, as mentioned at the beginning of this book, get removed from the HTML on render. Before we start outputting and filtering our data, we'll run through a few of the common declarations.

The v-html directive allows you to output content without using the mustache-style curly bracket syntax. It can also be used if your output contains HTML tags – it will render the output as HTML instead of plain text....

Using custom HTML declarations, Vue allows you to render elements and contents conditionally based on data attributes or JavaScript declarations. These include v-if, for showing a container whether a declaration equates to true, and v-else, to show an alternative.

The most basic example of this would be the v-if directive – determining a value or function if the block should be displayed.

Create a Vue instance with a single div inside the view and a data key, isVisible, set to false.

View:

Start off with the view code as the following:

      <div id="app">
        <div>Now you see me</div>
      </div>

JavaScript:

In the JavaScript, initialize Vue and create...

The next HTML declaration means we can start displaying our data and putting some of these attributes into practice. As our data is an array, we will need to loop through it to display each element. To do this, we will use the v-for directive.

Generate your JSON and assign it to a variable called people. During these examples, the generated JSON loop will be displayed in the code blocks as [...]. Your Vue app should look like the following:

      const app = new Vue({
        el: '#app',

        data: {
          people: [...]
        }
      });

We now need to start displaying each person's name in our View as a bulleted list. This is where the v-for directive comes in:

      <div id="app">
        <ul>
          <li v-for="person in people">
            {{ person }}
          </li>
        </ul...

With our data being listed out, we are now going to build filtering ability. This will allow a user to select a field to filter by and a text field to enter their query. The Vue application will then filter the rows as the user types. To do this, we are going to bind some form inputs to various values in the data object, create a new method, and use a new directive on the table rows; v-show.

Start off by creating the HTML in your view. Create a <select> box with an <option> for each field you want to filter, an <input> for the query, and a pair of radio buttons – we'll use these to filter active and non-active users. Make sure the value attribute of each &lt...

Along with v-if for showing and hiding content, you can also use the v-show="" directive. v-show is very similar to v-if; they both get added to the HTML wrapper and can both accept the same parameters, including a function.

The difference between the two is v-if alters the markup, removing and adding HTML elements as required, whereas v-show renders the element regardless, hiding and showing the element with inline CSS styles. v-if is much more suited to runtime renders or infrequent user interactivities as it could potentially be restructuring the whole page. v-show is favorable when lots of elements are quickly coming in and out of view, for example, when filtering!

When using v-show with a method, the function needs to return just a true or false. The function has no concept of where it is being used, so we need to pass in the current...

As with any HTML attribute, Vue is able to manipulate CSS classes. As with everything in Vue, this can be done in a myriad of ways ranging from attributes on the object itself to utilizing methods. We'll start off adding a class if the user is active.

Binding a CSS class is similar to other attributes. The value takes an object that can calculate logic from within the view or be abstracted out into our Vue instance. This all depends on the complexity of the operation.

First, let's add a class to the cell containing the isActive variable if the user is active:

      <td v-bind:class="{ active: person.isActive }">
        {{ activeStatus(person) }}
      </td>

The class HTML attribute is first prepended by v-bind: to let Vue know it needs to process the attribute. The value is then an object, with the CSS class as the key and the...

We now have a fully fledged user list/register that has filtering on selected fields and custom CSS classes depending on the criteria. To recap, this is what our view looks like now we have the filter in place:

      <div id="app">
        <form>
          <label for="fiterField">
            Field:
            <select id="filterField" v-model="filterField">
              <option value="">Disable filters</option>
              <option value="isActive">Active user</option>
              <option value="name">Name</option>
              <option value="email">Email</option>
              <option value="balance">Balance</option>
              <option value="registered">Date registered...

In this chapter, we looked at Vue HTML declarations, conditionally rendering our HTML and showing an alternative if required. We also put into practice what we learned about methods. Lastly, we built a filtering component for our table, allowing us to show active and inactive users, find users with specific names and emails, and filter out rows based on the balance.

Now we've got to a good point in our app, it's a good opportunity to take a look at our code to see if it can be optimized in any way. By optimizations, I mean reducing repetition, making the code simpler if possible, and abstracting logic out into smaller, readable, and reusable chunks.

In Chapter 3, Optimizing Our App and Using Components to Display Data, we will optimize our code and look at Vue components as a way of separating out logic into separate segments and sections.