Hide div onclick in Vue.js Hide div onclick in Vue.js vue.js vue.js

Hide div onclick in Vue.js


jQuery works out of the box, Vue.js does not. To initialize Vue.js component or App you must bind that component with its data to one specific HTML tag inside your template.

In this example the specified element is <div id="app"></div> and is targeted through el: #app. This you will know from jQuery.

After you declare some variable that holds the toggle state, in this case been isHidden, the initial state is false and has to be declared inside the data object.

The rest is Vue-specific code like v-on:click="" and v-if="". For better understand please read the documentation of Vue.js:

Note: consider reading the whole or at least longer parts of the documentation for better understanding.

var app = new Vue({  el: '#app',  data: {    isHidden: false  }})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="app">  <button v-on:click="isHidden = true">Hide the text below</button>  <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>    <h1 v-if="!isHidden">Hide me on click event!</h1></div>