隐藏或显示窗口调整大小 vuejs

Posted 2023-02-16

【中文标题】隐藏或显示窗口调整大小 vuejs

【英文标题】：Hide or show on window resize vuejs

【发布时间】：2020-09-10 17:18:17

【问题描述】：

假设有什么方法可以做到这一点，我的站点中有两个标题现在我希望当我在某个位置调整窗口大小时，它会被v-if 指令隐藏。我试图喜欢这个，但这不起作用。我不想通过 css 做到这一点。

<header v-if="deskMenu" id="headerDesktop" class="menu-desktop flex items-center justify-between py-6 px-10"></header>

<script>
  export default 
    name: "MainNav",

    data() 
       return 
           deskMenu : false,
       
    ,

    mounted() 
       this.$nextTick(function () 
           $(window).on('load resize', function () 
              if (matchMedia('only screen and (min-width: 1024px)').matches) 
                  this.deskMenu = true
                  console.log(this.deskMenu)
               else 
                  this.deskMenu = false
                  console.log(this.deskMenu)
              
           )
        )
     ,
  
 </script>

【问题讨论】：

你也在用jquery吗？

是的，用于调整窗口大小，我不知道有什么更好的方法来做到这一点

没关系，你的代码this不是vue组件的引用

【参考方案1】：

将回调更改为箭头函数，以使用 this 获取 vue 组件引用。

  mounted() 
    this.$nextTick(() => 
        $(window).on('load resize', () =>  
           if (matchMedia('only screen and (min-width: 1024px)').matches) 
               this.deskMenu = true
               console.log(this.deskMenu)
            else 
               this.deskMenu = false
               console.log(this.deskMenu)
           
        )
      )
    ,