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.
    <!-- 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>

export default {
  data() {
    return {
      // Reactive data property to control the condition
      showTitle: true
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.