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

<template>
  <div>
    <button @click="toggleElement">Toggle Element</button>
    <div v-show="showElement">This element will be hidden or shown based on window resize</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showElement: true
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    toggleElement() {
      this.showElement = !this.showElement;
    },
    handleResize() {
      // 根据窗口大小调整元素的显示状态
      if (window.innerWidth < 768) {
        this.showElement = false;
      } else {
        this.showElement = true;
      }
    }
  }
};
</script>