widgets v-if & v-else Usage (Conditional Rendering on VueJs)

Let’s start with a simple example to understand how it works. First of all define a new data value named show.

new Vue({
    el: '#app',
    data: {
        show: true,
    } 
});

Now continue with template part. Add the v-if & v-else directive to html tag. Notice: Its possible to use just v-if directive

<p v-if="show">Hello, i'm the first text.</p>
<p v-else>I'm the second text</p>

Create a button and toggle it for switching texts. Our html should looks like:

<div id="app">
    <button @click="{show = !show}">Text switcher</button>
    <p v-if="show">Hello, i'm the first text.</p>
    <p v-else>I'm the second text</p>
</div>

Each click of the button will be toggled the texts.