vue根据屏幕大小动态改变页面高度
:style="`height:${height}px`" //用变量的方式设置页面高度
height: document.body.clientHeight //data中定义height初始值,为屏幕高度
window.onresize = () => { //写在mounted中,onresize事件会在页面大小被调整时触发
return (() => {
window.screenHeight = document.body.clientHeight;
this.height = window.screenHeight;
})();
};
height(val) { //在watch中监听height,浏览器窗口大小变动时自适应高度。
this.height = val;
console.log(this.height, "新的高度");
},