此时你设置后会发现屏幕的高度出现滚动条
那是因为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. 线段树set，add基础

    UVA11992 Fast Matrix Operations https://www.luogu.org/problem/UVA11992 此类模板题建议随便打打就行了233....

  2. 【AtCoder】AtCoder Grand Contest 035 解题报告

    点此进入比赛 \(A\):XOR Circle(点此看题面) 大致题意: 给你\(n\)个数,问是否能将它们摆成一个环,使得环上每个位置都是其相邻两个位置上值的异或值. 先不考虑\(0\),我们假设环 ...

  3. Note | Ubuntu

    目录 0. 教程 1. 安装 2. 系统 0. 教程 <Linux就该这么学>:https://www.cnblogs.com/RyanXing/p/9462850.html 1. 安装 ...

  4. JDK的小Bug你了解么？

    ​用了这么长时间的JDK了,有没有老铁发现JDK的bug呢?从最早版本的JDK1.2到现在普及开的JDK1.8以来,JAVA经历了这么多年的风风雨雨,依然坚持在一线上,是不是感觉很神奇,但是,有没有多 ...

  5. usb设备在sysfs中的命名规范

    "root-hub的编号"-"设备(或者hub)插入的端口号"[."设备(或者hub)插入的端口号"]:"USB设备配置号&quo ...

  6. Java 未来行情到底如何，来看看各界人士是怎么说的

    这是黄小斜的第102篇文章 作者 l 黄小斜 来源 l 公众号[程序员黄小斜](ID:AntCoder) 转载请联系作者(wx_ID:john_josh) Java从出生到现在已经走过了 20 多个年 ...

  7. JVM-基本操作

    1.我们为什么要对jvm做优化?在本地开发环境中我们很少会遇到需要对jvm进行优化的需求,但是到了生产环境,我们可能将有下面的需求: 运行的应用“卡住了”,日志不输出,程序没有反应服务器的CPU负载突 ...

  8. Python连载23-file_analysis

    一.文件 1.定义:长久保存信息的一种信息集合 2.常用操作:(1)打开关闭(2)读写内容(3)查找 3.open函数 (1)意义:打开文件,带有很多参数 (2)第一个参数:必须有,文件的路径和名称 ...

  9. 明解C语言 入门篇 第十二章答案

    练习12-1 /* 用表示学生的结构体来显示高尾的信息 */ #include <stdio.h> #define NAME_LEN 64 /* 姓名的字符数 */ /*=== 表示学生的 ...

  10. 按照官网的升级完socket.io报错Manager is being released。

    查阅了很多资料和英文官网自己也提出了一些问题,估计官网以前有该类的问题历史,懒得回复. 终于功夫不负有心人原因竟然是:你的manager被释放了. you need to make sure the ...