zoukankan      html  css  js  c++  java
  • clientHeight获取屏幕可视化高度

    此时你设置后会发现屏幕的高度出现滚动条
    那是因为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>
  • 相关阅读:
    LeetCode刷题7——数字的补数
    Leetcode刷题6—不同路径
    Leetcode刷题5—最大子序和
    LeetCode刷题4——子集
    LeetCode刷题3——位1的个数
    LeetCode刷题2——颠倒二进制位
    小鸡啄米问题求解
    weavenet
    为系统守护进程预留计算资源
    PolicyRouting (ip rule)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11571122.html
Copyright © 2011-2022 走看看