此时你设置后会发现屏幕的高度出现滚动条
那是因为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>
