在窗口调整大小时隐藏或显示vue.js

由 发布于

Is there any way to do this suppose, I have two headers in my site now I want that when I resize the window in a certain position it will be hide by v-if directive. I tried to like this but this not working. I don't want to do this by 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>