- Learn by example
Make an RPG
Vue Implementations

Example of How to use v-if

Use v-if to show content conditionally.

<div v-if="im_home"> Hello, I am home </div>
var app = new Vue({ el: '#app', data: { im_home: true } });

Try the above code by clicking on doit now. You will see that the div shows up because im_home is true.

Change im_home to false and hit the run button. Does it show up?

Now, let's add an else statement to it. The v-else block has to immediately follow the v-if block to work.

<div v-if="im_home"> Hello, I am home </div> <div v-else> I am NOT home. </div>

Make the above change and run it again. Depending on the value of im_home either the top or bottom section will show up.

Conditional Groups

If you want to show multiple elements conditionally then you need the template element. Try to make the following change and see if it works. If it doesn't you can always use the green doit now button.

<template v-if="im_home"> <h3>Hello</h3> <div>I am home</div> <div>knock on the door</div> </template> <template v-else> <h3>Not home</h3> <div>I am NOT home.</div> </template>

In the next lesson, we will learn about Example of How to use v-for in vue

Get the Latest Tutorial Updates
<< >>