Hide div onclick in Vue

问题

How can I hide an element with Vue.js when it is clicked? There's only one element to hide.

A jQuery solution would look like that:

$('.button').click(function() {
  $('.hideme').hide();
);

But what is the Vue.js equivalent of this?

回答1:

First of all jQuery works out of the box. This is one main difference. So you have to initialize your Vue Component or App. You are binding 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 that you declare some variable that holds the toggle state. In this case it is 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:

The Vue Instance https://vuejs.org/v2/guide/instance.html
Template Syntax https://vuejs.org/v2/guide/syntax.html
Event Handling https://vuejs.org/v2/guide/events.html#Listening-to-Events
Conditionals https://vuejs.org/v2/guide/conditional.html

I am recommening you to read in this order if you want to get a quick overview. But please 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>

回答2:

This is a very basic Vue question. I suggest your read the guide, even the first page will answer your question.

However, if you still need the answer this is how you hide/show elements in Vue.

new Vue({
 el: '#app',
 data () {
   return {
     toggle: true
   }
 },
})

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div v-show='toggle'>showing</div>
</div>

回答3:

<div>
    <div>

        <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>

        <h1 v-if="!isHidden">Hide me on click event!</h1>
    </div>
</div>

name: "Modal",
    data () {
        return {
            isHidden: false
        }
    }

回答4:

<template>
    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-filter" @click="showFilter = !showFilter"></i></button>
</template>

<script>
    export default {
        methods:{
            showFilter() {
                eventHub.$emit('show-guest-advanced-filter');
            }
        }
    }

</script>

But it's not worked this method.

<template>
    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-filter" @click="filtersMethod"></i></button>
</template>

<script>
    export default {
        data: () => ({
            filter: true,
        }),

        methods: {
            showFilter() {
                eventHub.$emit('show-guest-advanced-filter');
                this.filter = false;
            },

            hideFilter() {
                eventHub.$emit('hide-guest-advanced-filter');
                this.filter = true;
            },

            filtersMethod() {
                return this.filter ? this.showFilter() : this.hideFilter();
            }
        }
    }

</script>

This is worked.

来源：https://stackoverflow.com/questions/48929139/hide-div-onclick-in-vue

标签

javascript

Vue.js

frontend