手机端弹出菜单栏

html部分：

        

          
首页
          
产品中心
          
新闻中心
          
关于我们
          
联系我们
        
        
        
 

vue部分：

    export default {
  name: 'Header',
  data () {
    return {
      MenuBar: false
    }
  },
  methods: {
    toggler: function (e) {
      this.MenuBar =! this.MenuBar
    }
  },
  created: function () {
    let body = document.querySelector('body')
        body.addEventListener('click',(e)=>{
            console.log(e.target.id === 'menu_bar')         
        if(e.target.id === 'toggler-btn' || e.target.id === 'menu_bar'){
                this.MenuBar = true
        }else {
            this.MenuBar = false
        }
        },true)
  }
}
    ```