如果不用 bootstrap 或者其他框架，这个部分应该怎么写呢？我彻底迷失了。。。 现在的 component 代码如下。如果用 jquery 的话，就在相应的尺寸下给予不同的 display 属性就可了。换了vue，我彻底转不过来了。 就是很普通的在手机屏幕上显示一个按钮，按下按钮就打开菜单，然后在大屏上，不显示按钮，直接显示菜单。。。

希望哪位可以指点一下，谢谢

<template>
  <header>
    <nav>
     <div class='navbar'>
      <div class="brand">
        <h1>Simple Poll</h1>
      </div>
        <i class="fa fa-bars" aria-hidden="true" @click='openMenu()'></i>
      <div class="nav-menu" ref="nav-menu">
        <a href=""> <router-link to="/">Home</router-link></a>
        <a href=""><router-link to="/about">About</router-link></a>
      </div>
        </div>
    </nav>
  </header>
</template>

<script>

export default {
  name: 'navbar',
  data () {
    return {
      open: false
    }
  },
  methods: {
    openMenu: function(){
      console.log(this.$refs['nav-menu'])
    },
  },
  computed: {

}

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
  $green: #34bf49
  $red: #ff4c4c
  $blue: #0099e5
  $white: #fff
  $black: #050f2c
  $shadow-down: 0px 0px 10px 0px $black
  $shadow-up: 2px 2px 20px 0px $black
  nav
    width: 100%
    background: $black

  .navbar
    margin: 0 auto
    width: 100%
    max-width: 960px
    display: flex
    flex-direction: column
    align-items: center
    box-sizing: border-box
    justify-content: space-between
    padding: 12px 10px
    color: $white
    @media screen and (min-width: 760px)
      flex-direction: row
    .brand
      width: 100%
    i
      @media screen and (min-width: 760px)
        display: none

    .nav-menu
      display: none
      a
        text-decoration: none
        margin-right: 10px
        font-family: 'Open Sans', sans-serif
        font-weight: 700
        color: $white
      @media screen and (min-width: 760px)
        display: block
    h1
      font-family: 'Open Sans', sans-serif
      margin: 0
</style>