Question

我正在尝试制作一个可以通过单击按钮显示/隐藏切换的导航。谁能告诉我这里做错了什么？我还在学习Vue，所以任何帮助都会受到赞赏。感谢。

这是来自navigation.vue的代码：

<template>
   <div>
    <nav v-if="seen">
        <ul>
            <li><a href="#front">front</a></li>
            <li><a href="#contact">contact</a></li>
        </ul>
    </nav>
        <p><button v-on:click="seen = !seen">Toggle</button></p>
    </div>
</template>

<script>
    export default {
      data: {
        seen: true
      }
    }
</script>

导入App.vue中的导航：

<template>
  <main>
    <app-navigation></app-navigation>
    <app-front></app-front>
    <app-footer></app-footer>
  </main>
</template>

<script>
    import Navigation from './components/navigation.vue'
    import Front from './components/front.vue'
    import Footer from './components/footer.vue'

    export default {
      components: {
        'app-navigation': Navigation,
        'app-front': Front,
        'app-footer': Footer
      },
      data () {
        return {
        }
      }
    }
</script>

Answer 1

使用组件，您的data属性需要是一个函数。

data(){
  return {
    seen: true
  }
}

Vue.js v-if切换显示/隐藏导航

1 个答案: