Conditional rendering with Vue v-if

Conditionals are a core part of programming languages. The vue framework uses the v-if directive amongst others in handling this.

The Vue v-if directive renders a block of code if its directive is truthy.

<template>
  <div>
    <p v-if="isActive">I am actually Active</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

As long as the expression isActive remains truthy, our block keeps displaying. The reverse is the case when it is false.