Javascript 在 Vue 中隐藏 div onclick

Hide div onclick in Vue

提问by Victor Berland

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

单击时如何使用 Vue.js 隐藏元素？只有一个元素要隐藏。

A jQuery solution would look like that:

jQuery 解决方案如下所示：

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

But what is the Vue.js equivalent of this?

但是 Vue.js 的等价物是什么？

回答by Michael Czechowski

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.

首先，jQuery 开箱即用。这是主要区别之一。所以你必须初始化你的 Vue 组件或应用程序。您将该组件与其数据绑定到模板中的一个特定 HTML 标记。在此示例中，指定的元素是<div id="app"></div>并且是通过 定位的el: #app。这你会从 jQuery 中知道。

After that you declare some variable that holds the toggle state. In this case it is isHidden. The initial state is falseand has to be declared inside the dataobject.

之后，您声明一些保存切换状态的变量。在这种情况下是isHidden。初始状态是false并且必须在data对象内部声明。

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

其余的是特定于 Vue 的代码，如v-on:click=""和v-if=""。为了更好地理解，请阅读 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

• Vue 实例https://vuejs.org/v2/guide/instance.html
• 模板语法https://vuejs.org/v2/guide/syntax.html
• 事件处理https://vuejs.org/v2/guide/events.html#Listening-to-Events
• 条件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/[email protected]/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>

回答by samayo

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

这是一个非常基本的 Vue 问题。我建议您阅读指南，即使第一页也会回答您的问题。

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

但是，如果您仍然需要答案，这就是您在 Vue 中隐藏/显示元素的方式。

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

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

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

回答by Adam Colton

<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
        }
    }

回答by Kerim Ku?cu

<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.

这是有效的。