- 在
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
事件,并在事件触发时更新数据。最后,在组件销毁前,我们移除事件监听器,防止内存泄漏。