Vue.js 2 Design Patterns and Best Practices

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