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.