title: VUE JS - How to hide a div by default? And if user clicks on button then it should display using vue
body: <p>Below is my complete code And here I am trying to hide the &quot;v-show&quot; by default. It should in hidden state by default and when the user clicks on button then it should display. I have used &quot;display:none&quot; css property for hiding the div default but it is not working. How can we solve this?</p>
  <pre><code>&lt;script src=&quot;https://unpkg.com/vue@2.5.3/dist/vue.js&quot;&gt;&lt;/script&gt;
  
  &lt;div id=&quot;app&quot;&gt;
    &lt;button @click='toggle = !toggle'&gt; click here &lt;/button&gt;
    &lt;div id=&quot;hide&quot; v-show='toggle'&gt;showing&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>&lt;script&gt;
  new Vue({
   el: '#app',
   data () {
     return {
       toggle: true
     }
   },
  })
  &lt;/script&gt;
  </code></pre>
  <p><em>css</em></p>
  <pre><code>#hide {
      display:none;
  }
  </code></pre>