[Vuejs]-How can I hide below mentioned div tag in vue js

by

1👍

You can hide/show elements based on a variable by using the v-if directive, and change the state with a simple method. This is called Conditional Rendering.
I suppose OP uses single file template syntax since not stated otherwise.

<template>
  <div>
    <div class="box-to-hide" v-if="showBox">
    <div class="button" @click="toggleShowBox">Enter manually</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showBox : false
      }
    },
    methods: {
      toggleShowBox() {
        this.showBox = !this.showBox;
      }
    }
  };

</sript>

You can find more details about v-if in the official vue guide https://v2.vuejs.org/v2/guide/conditional.html .

v-if vs. v-show

You can also use v-show directive.

<h1 v-show="ok">Hello!</h1>

The difference is that an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.

👤turbopasi

Leave a comment