v-if

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 p inside the view and a data key, isVisible, set to false.

View:

Start off with the view code as the following:

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

JavaScript:

In the JavaScript, initialize Vue and create an isVisible data property: 

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

        data: {
          isVisible: false
        }
      });

Right now, your Vue app would be displaying the contents of your element. Now add the v-if directive to your HTML element with the value of isVisible:

      <p id="app">
        <p v-if="isVisible">Now you see me</p>
      </p>

Upon pressing save, your text should disappear. That is because the tag is being conditionally rendered based on the value, which is currently false. If you open up your JavaScript console and run the following code, your element should reappear:

      app.isVisible = true

v-if doesn't just work with Boolean true/false values. You can check whether a data property is equal to a specific string:

      <p v-if="selected == 'yes'">Now you see me</p>

For example, the preceding code checks whether a selected data property is equal to the value of yes. The v-if attribute accepts JavaScript operators, so can check not equals, bigger, or less than. 

The danger here is that your logic starts to creep into your View away from your ViewModel. To combat this, the attribute also takes functions as a value. The method can be as complicated as required but ultimately must return a true if you wish to show the code and a false if not. Bear in mind that if the function returns anything other than a false value (such as 0 or false) then the result will be interpreted as true.

This would look something like this:

      <p v-if="isSelected">Now you see me</p>

And your method could be as this:

      isSelected() {
        return selected == 'yes';
      }

If you don't wish to completely remove the element and only hide it, there is a more appropriate directive, v-show. This applies a CSS display property rather than manipulating the DOM – v-show is covered later in the chapter.