Vue.js打开和关闭汉堡菜单

我用两种方法制作了一个导航抽屉，一种打开，一种关闭。不幸的是，它们不起作用。当我点击按钮打开导航抽屉时，它正在工作，但是我不能通过点击十字来关闭它

代码如下：

<div class="navigationdrawer">
       <span v-on:click="openNav()" style="font-size:30px;cursor:pointer;">&#9776;</span>

        <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" v-on:onclick="closeNav()">&times;</a>
            <a v-bind:href="link1">{{ name1 }}</a>
            <a v-bind:href="link2">{{ name2 }}</a>
            <a v-bind:href="link3">{{ name3 }}</a>
            <a v-bind:href="link4">{{ name4 }}</a>
        </div>
    </div>

---

它不是

v-on:onclick

，而是当您将它放入第一个函数时，只需

v-on:click

。此外，您还可以使用速记

@click=“someFunc”

，此外，您不会调用函数，而只是将其放入事件处理程序中，如下所示：

---

@click=“openNav”

它不是

v-on:onclick

，而是当您将它放入第一个函数时，只需

v-on:click

export default {
        name: 'NavigationDrawer',
        props: {
            msg: String,
            name1: String,
            name2: String,
            name3: String,
            name4: String,
            link1: String,
            link2: String,
            link3: String,
            link4: String
        },

        methods: {
            openNav() {
                document.getElementById('mySidenav').style.width = '12%'
            },
            closeNav() {
                document.getElementById('mySidenav').style.width = '0%'
            }
        }

    }