Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Displaying, Looping, Searching, and Filtering Data Chapter 2

Conditional rendering

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.

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 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 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:

<div id="app">

<div v-if="isVisible">Now you see me</div>

</div>