点击切换班级答案

【问题标题】：Click to toggle class点击切换班级
【发布时间】：2018-11-27 12:38:58
【问题描述】：

我正在尝试创建一个单击事件，该事件将在 HTML 元素上切换一个类。

我的 HTML 如下所示：

<navigation class="navigation" v-bind:class="{'class1': class1}">

在我的数据方法中，我有：

            data: {
                class1: false 
            },

但是，当我单击元素时没有任何反应，我什至在控制台中都没有收到错误消息。也许我没有在我的代码中包含正确版本的 vueJS 以使用事件处理程序？

您可以在此处查看带有完整代码的 codepen：https://codepen.io/fennefoss/pen/BGOywz

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

我在您的导航中没有看到点击处理程序？

<navigation @click="class1 = !class1" class="navigation" v-bind:class="{'class1': class1}">

这将例如在点击时切换类。

【讨论】：

我不需要方法或任何东西吗？，我不能让任何事情发生。我还尝试了此页面上的一些简单示例：vuejs.org/v2/guide/events.html 但是我无法工作：/
@MikkelFennefoss 我建议您观看入门课程或其他内容，因为您似乎真的很困惑，那里有很多，例如v-bind:class 将css类绑定到元素，如果满足一定条件。

【解决方案2】：

我想出了如何解决它，通过使用以下代码：

<navigation id="mobile-toggle"
    v-bind:class="{ active: showMobileMenu }"
    v-on:click="showMobileMenu = !showMobileMenu">something
</navigation>

data: {
    showMobileMenu: false
},

【讨论】：

Gongratz，但这不正是我的解决方案吗？ :D