此时你设置后会发现屏幕的高度出现滚动条
那是因为body有8个外边距 设置margin：0就可以解决

watch可以区监听data中的数据，只要data中的数据发生变化 就可以执行watch中的函数了
watch也可以区调用methods中的方法

  <style>

     #box{

      background: #000;

     }

     body{

      margin:;

     }

  </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>

clientHeight获取屏幕可视化高度的更多相关文章

  1. android 获取屏幕的高度和宽度、获取控件在屏幕中的位置、获取屏幕中控件的高度和宽度

    (一)获取屏幕的高度和宽度 有两种方法: 方法1: WindowManager wm = (WindowManager) getContext().getSystemService(Context.W ...

  2. 获取屏幕宽高度与可视区域宽高度（availWidth、clientWidth、width、innerWidth）

    经常会遇到需要获取屏幕宽度.高度,可视区域宽度.高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了. 先来列举下这几个吧: screen.availHeight.screen.availWid ...

  3. Android获取屏幕实际高度跟显示高度，判断Android设备是否拥有虚拟功能键

    //获取屏幕尺寸,不包括虚拟功能高度 getWindowManager().getDefaultDisplay().getHeight(); 获取屏幕原始尺寸高度,包括虚拟功能键高度, private ...

  4. Android获取屏幕的高度和宽度

    方法一: DisplayMetrics metrics=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics( ...

  5. 用JS 和 jQery获取屏幕的高度和宽度

    用的时候,网上找了下,放在一起,方便以后查阅 document.body.clientWidth document.body.offsetWidth(包括线宽)//网页可见区域宽 document.b ...

  6. js和jquery获取屏幕的高度

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  7. 微信小程序 简单获取屏幕视口高度

    由于小程序的宽度是固定的 750rpx,我们可以先用wx.getSystemInfo 来获取可使用窗口的宽高(并非rpx),结合750rpx的宽度算出比例,再用比例来算出高度 let that = t ...

  8. js 获取 屏幕 可用高度...

    document.documentElement.clientWidth 此方法适用于手机... document.documentElement.clientHeight (浏览器(手机或电脑)可用 ...

  9. android之获取屏幕的宽度和高度

    获取屏幕的宽度和高度: 方法一: //获取屏幕的宽度 public static int getScreenWidth(Context context) { WindowManager manager ...

随机推荐

  1. drf框架知识总结

  2. 201871010111-刘佳华《面向对象程序设计（java）》第十三周学习总结

    201871010111-刘佳华<面向对象程序设计(java)>第十三周学习总结 实验十一 图形界面事件处理技术 实验时间 2019-11-22 第一部分:理论知识总结 1.事件源:能够产 ...

  3. CentOs篇

    Advanced-高级配置.Security-安全.Boot-启动引导: 1.Removable Devices-移动设备 2.Hard Drive-本地硬盘 3.CD-ROM- Drive-光盘 4 ...

  4. 使用Sourcetree(for windows)建立github同步仓库

    回顾Linux作业中用命令行的方式管理本地与远程仓库的过程,原理图如下: 与之前本质相同,但是使用GUI的github管理工具将更为便捷,Sourcetree就是其中之一 1.在Windows下安装g ...

  5. h5移动端页面强制横屏

    说明:这个的原文章来自于https://www.jianshu.com/p/9c3264f4a405  ,我做点点补充  ,谢谢原链接的小姐姐 最近公司是要我做一个h5的小视频,因为是视频接视频,并且 ...

  6. 记一次SQL调优

    insert优化 如果你在某一时刻有大量的insert操作,一条一条插入是非常耗时的.insert语句本身支持一次插入很多条记录,插入记录数上限受sql语句长度限制,一般一次插个几千条是没问题的.在我 ...

  7. sed命令常用用法

    1.字符串替换 sed -i "s/xxx/yyy/g" /home/test.log // 将home目录下的test.txt文件中的所有xxx字符串替换成yyy字符串 sed ...

  8. IEEE 二进制浮点数的表示

    朋友在谈一个物流相关的项目,是以前项目的一个延续,涉及到后台的扩展,手机端的App,外加两个App的对接的蓝牙打印机.这个项目前后说了一个多月了吧,最近才草拟了协议.项目本来不复杂,但是客户却如此的拖 ...

  9. let/const特性

        let: 1.声明的变量不存在预解析: console.log(a); let a=1; 2.变量名不允许重复(在同一作用域下): { let a=1; let a=2; console.lo ...

  10. 【linux】glibc升级

    glibc升级 步骤如下: 1.下载解压glibc wget http://ftp.gnu.org/gnu/glibc/glibc-2.18.tar.gz tar zxvf glibc-2.18.ta ...