hide div after 5 seconds vue js

To hide a div after 5 seconds in Vue.js, you can use the following steps:

1. First, add a data property to your Vue component to keep track of the visibility state of the div. For example, you can call it "isVisible" and initialize it to true:

data() {
  return {
    isVisible: true
  }
}

1. Next, add a method that will be responsible for hiding the div after 5 seconds. You can call it "hideDiv":

methods: {
  hideDiv() {
    setTimeout(() => {
      this.isVisible = false;
    }, 5000);
  }
}

1. Now, you need to call the "hideDiv" method when the component is mounted. You can use the "mounted" lifecycle hook for this:

mounted() {
  this.hideDiv();
}

1. Finally, in your template, you can use the "v-if" directive to conditionally render the div based on the "isVisible" property:

<div v-if="isVisible">
  <!-- Your div content here -->
</div>

With these steps, the div will be initially visible, but after 5 seconds, it will be hidden. Please note that the div will only be hidden on the client-side and will still exist in the DOM. If you want to completely remove the div from the DOM after 5 seconds, you can use the "v-show" directive instead of "v-if".