此時你設置后會發現屏幕的高度出現滾動條
那是因為body有8個外邊距 設置margin：0就可以解決
watch可以區監聽data中的數據，只要data中的數據發生變化 就可以執行watch中的函數了
watch也可以區調用methods中的方法
<style> #box{ background: #000; } body{ margin: 0; } </style>
<body> <div id="app"> <div id="box" ref="fullheight"> </div> </div> </body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
clientHeight:"",
};
},
mounted(){
this.clientHeight=`${document.documentElement.clientHeight}`;//獲取屏幕可視化的高度；
// console.log(this.clientHeight);//798px
window.onresize = function temp() { //屏幕大小發生改變觸發 window.onresize
this.clientHeight = `${document.documentElement.clientHeight}`;
// console.log("sf",this.clientHeight)
};
},
watch: {
// 如果 `clientHeight` 它是data中的值發生改變，這個函數就會運行
clientHeight: function () {
this.changeFixed(this.clientHeight);//去調用methods中的函數
}
},
methods:{
changeFixed(clientHeight){ //動態修改樣式
console.log(clientHeight);
this.$refs.fullheight.style.height = clientHeight+'px';
},
}
})
</script>