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

在Vue.js中，可以使用v-show指令来根据窗口调整大小的情况来隐藏或显示元素。v-show指令根据表达式的值来决定元素是否显示，如果表达式的值为真，则元素显示；如果表达式的值为假，则元素隐藏。

下面是一个示例：

<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>

在上面的示例中，我们使用v-show指令来控制一个div元素的显示与隐藏。在mounted钩子函数中，我们添加了一个窗口大小调整的事件监听器，并在beforeDestroy钩子函数中移除了该事件监听器。在handleResize方法中，我们根据窗口大小来调整showElement的值，从而控制元素的显示与隐藏。

这种方法可以根据窗口大小动态地隐藏或显示元素，适用于需要根据不同设备或窗口大小来调整布局的场景。

腾讯云相关产品和产品介绍链接地址：