1.data
中给需要动态设置的数据一个初始值
// html
<div :style="styleObject">我是demo</div>
// js
data() {
return {
styleObject: {
height: '900px'
}
}
}
2.在mounted
钩子中设置并监测浏览器窗口变化
mounted() {
// 动态设置背景图的高度为浏览器可视区域高度
// 首先在Virtual DOM渲染数据时,设置下demo的高度.
this.styleObject.height = `${document.documentElement.clientWidth*0.4}px`; // 具体计算看需要
// 然后监听window的resize事件.在浏览器窗口变化时再设置下背景图高度.
const that = this;
window.onresize = function temp() {
that.styleObject.height = `${document.documentElement.clientWidth*0.4}px`;
};
},