Question

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

我的HTML看起来像这样：

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

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

            data: {
                class1: false 
            },

但是，当我单击该元素时什么也没发生，我什至在控制台中都没有收到错误。也许我没有在代码中包含正确版本的vueJS才能使用事件处理程序？

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

Answer 1

我在导航中看不到点击处理程序吗？

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

例如，这将在单击时切换类。

Answer 2

我通过使用以下代码找出了解决方法：

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

data: {
    showMobileMenu: false
},

点击切换课程

2 个答案: