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

有没有办法做到这一点？假设，我的站点中现在有两个标题，我希望当我在某个位置调整窗口大小时，它将被

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>

导出默认值{
名称：“主导航”，
数据（）{
返回{
桌面菜单：false，
}
},
安装的（）{
此.$nextTick（函数（）{
$（窗口）.on（'load resize'，函数（）{
如果（匹配媒体（仅屏幕和（最小宽度：1024px））。匹配）{
this.deskMenu=true
console.log（this.deskMenu）
}否则{
this.deskMenu=false
console.log（this.deskMenu）
}
})
})
},
}

将回调更改为箭头函数，以使用

此

获取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)
           }
        })
      })
    },

---

您也在使用jquery吗？是的，对于窗口大小调整，有什么更好的方法可以做到这一点，我不知道它是否可以，在您的代码上

此

不是对vue组件的引用