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.