vue.js获取body高度

  1. mounted生命周期钩子中获取:
javascript 复制代码
export default {
  mounted() {
    this.bodyHeight = document.body.offsetHeight;
  },
  data() {
    return {
      bodyHeight: 0
    };
  }
};
javascript 复制代码
export default {
  data() {
    return {
      bodyHeight: 0
    };
  },
  mounted() {
    this.bodyHeight = window.innerHeight;
  }
};
javascript 复制代码
export default {
  data() {
    return {
      bodyHeight: 0
    };
  },
  mounted() {
    this.bodyHeight = document.body.offsetHeight;
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.bodyHeight = document.body.offsetHeight;
    }
  }
};

在上述示例中,我们首先在mounted钩子中获取了body的高度,并将其存储在Vue实例的数据对象中。然后,我们可以在模板中使用这个值来显示或渲染内容。如果需要在窗口大小改变时更新高度,我们可以添加一个事件监听器来监听resize事件,并在事件触发时更新数据。最后,在组件销毁前,我们移除事件监听器,防止内存泄漏。

相关推荐
zjjuejin3 分钟前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩12 分钟前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪13 分钟前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮13 分钟前
js符号(Symbol)
前端·javascript
恋猫de小郭41 分钟前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v1 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍1 小时前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲1 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_3 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒3 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端