Basic Conditional Rendering

Show how to use the v-if directive to conditionally render elements in the DOM based on a piece of reactive data.

<template>
  <div>
    <!-- Use v-if to conditionally render the h1 element -->
    <h1 v-if="showTitle">Hello, World!</h1>

    <!-- Use v-else to provide an alternative when the condition for v-if is not met -->
    <h2 v-else>No Title to Show</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Reactive data property to control the condition
      showTitle: true
    };
  }
};
</script>

This Vue component uses the v-if directive to conditionally render an h1 element when the 'showTitle' data property is true. If 'showTitle' is false, an h2 element with different text is rendered using the v-else directive.