vuejs show content on loaded

<template>
  <div>
    <button @click="loadContent">Load Content</button>
    <div v-if="contentLoaded">
      <!-- Your content goes here -->
      {{ yourContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentLoaded: false,
      yourContent: "" // Initialize with your content data type
    };
  },
  methods: {
    loadContent() {
      // Simulate an asynchronous content loading process
      setTimeout(() => {
        this.yourContent = "Content loaded successfully.";
        this.contentLoaded = true;
      }, 1000); // Adjust the timeout as needed
    }
  }
};
</script>

This example includes a button that, when clicked, triggers the loadContent method. The method simulates an asynchronous content loading process using setTimeout. Once the content is loaded, the contentLoaded data property is set to true, and the content is displayed conditionally using v-if in the template. Replace {{ yourContent }} with the actual data you want to display when the content is loaded. Adjust the timeout value in setTimeout based on your actual loading process.