Conditionally showing DOM elements

When creating business applications, there'll be many times when you only want to display a particular element if a certain condition is true or false. This could include a user's age, whether the user is logged in, whether it is an administrator or any other piece of business logic you can think of.

For this, we have a variety of conditional directives such as v-show, v-if, v-else, and v-else-if, all of which act in similar yet different ways. Let's take a look at this in more detail by creating a new playground project:

# Create a new Vue project
$ vue init webpack-simple vue-conditionals

# Navigate to directory
$ cd vue-conditionals

# Install dependencies
$ npm install

# Run application
$ npm run dev

v-show

If we want to hide elements from view yet still have them in the DOM (effectively display:none), we can use v-show:

<template>
<div id="app">
 <article v-show="admin">
  <header>Protected Content</header>
 <section class...