In Vue, there are two ways to conditionally render parts of your app: v-if and v-show.
You may be wondering, “Why do we need two ways to this?”
And this is a fantastic question, and definitely one that I had when learning Vue. And the answer is because even though these directives have the similar end results, the way they conditionally show your content works differently.
In this tutorial, we’ll take a look at what conditional rendering is, how v-if and v-show work, and when you should use each one.
Alright, let’s jump right in.
So what even is conditional rendering?
Conditional rendering is the ability to control whether or not template code is rendered. We can do this using the current state of our application.
Let’s take a look at an example. Imagine that we are creating a form, and we want to display an invalid input error message if our password is less than 6 characters long.
So in our template, we’ll create a basic form area with a few inputs. And in our script, we’ll use v-model to make our form model our data.
<template>
<div>
<h2>Sign Up</h2>
{{ email }} {{ password }}
<p><input type="text" placeholder="Email"…