<template>
<!此div的高度取屏幕可視區域的高度>
<div class="hello" :style="{'height':getClientHeight}">
<h5>{{ msg }}</h5>
</div>
</template>
<script>
export default {
data() {
return {
msg: "Welcome to Your Vue.js App",
};
},
computed: {
getClientHeight:function () {
//屏幕可視區域的高度
let clientHeight = document.documentElement.clientHeight + "px"
console.log("clientHeight 1=="+clientHeight)
//窗口可視區域發生變化的時候執行
window.onresize = () => {
clientHeight = document.documentElement.clientHeight + "px"
console.log("clientHeight changed2=="+clientHeight)
return clientHeight
}
console.log("clientHeight 3=="+clientHeight)
return clientHeight
}
}
};
</script>
<! Add "scoped" attribute to limit CSS to this component only >
<style scoped>
.hello{
width: 100%;
background-color: #42b983;
}
</style>
