vue 监听元素高度的变化_vue+js实时监听屏幕高度实现目标DIV垂直居中

一如既往，先看GIF

代码

html

前端样式使用的BootstrapV3，最开始在获取#main的高度的时候用$('#main').height()得到的结果一直为0，网上浏览后找到了解决方案：给目标DIV加上overflow: hidden的样式，我不是专门搞前端的，不去想为什么了

LOG IN

js

利用window.onresize监听浏览器窗口高度变化，重新获取窗口高度，重置#main的上外边距，即(当前窗口高度 - 目标DIV高度) / 2

mouted周期里的代码放在created周期里也是可以的

var vue = new Vue({

el: '#app',

data: {

password: '',

mainStyle: {

marginTop: ''

},

mainHeight: $('#main').height()

},