Question

我尽一切努力使单击时隐藏导航链接，但没有成功。这是我的Header.vue文件。

<template>
<nav class="navbar is-dark is-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <router-link to="/" class="navbar-item">
                 <img src="../../assets/logo.png" width="">
            </router-link>
            <a role="button"
                :class="{ 'is-active': ShowMenu }"
                class="navbar-burger burger"
                @click="toggleMenu()"
                aria-label="menu"
                aria-expanded="false">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div :class="{ 'is-active': ShowMenu }"
            class="navbar-menu">
            <div class="navbar-start">
                <router-link to="/" class="navbar-item">Home</router-link>
                <router-link to="/about" class="navbar-item">About</router-link>
            </div>
            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="field is-grouped">
                        <p class="control">
                            <router-link to="/login" class="button is-dark">
                                <span><i class="fa fa-lock"></i> Login</span>
                            </router-link>
                        </p>
                        <p class="control">
                            <router-link to="/register" class="button is-light">
                                <span><i class="fa fa-user"></i> Register</span>
                            </router-link>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

这是JS代码。单击链接后导航正常，但我唯一的问题是它没有自动隐藏。

export default {
  name: "Header",
  data() {
      return {
          ShowMenu: false,
          NavigationItems: true,
          NavigationItems: false
      }
  },
  methods: {
      toggleMenu: function() {
          this.ShowMenu = !this.ShowMenu
      },
      toggleNavItem: function() {
          false
      }
  }
}

Answer 1

尝试

<a v-if='!ShowMenu' role="button" ...

代替CSS

Answer 2

您不应该使用v-if来“杀死” dom中的元素，但是，如果您只想切换它，请使用v-show宽度!ShowMenu，如Steven所解释的那样。

如果要使用CSS类：是否有一个名为is-active的类，并且是.burger display: none;的默认行为吗？如果您想继续使用此解决方案，请向我们提供您的CSS。

单击时隐藏VueJs中的导航链接

2 个答案: