clientHeight获取屏幕可视化高度
此时你设置后会发现屏幕的高度出现滚动条
那是因为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获取屏幕可视化高度的更多相关文章
- android 获取屏幕的高度和宽度、获取控件在屏幕中的位置、获取屏幕中控件的高度和宽度
(一)获取屏幕的高度和宽度 有两种方法: 方法1: WindowManager wm = (WindowManager) getContext().getSystemService(Context.W ...
- 获取屏幕宽高度与可视区域宽高度（availWidth、clientWidth、width、innerWidth）
经常会遇到需要获取屏幕宽度.高度,可视区域宽度.高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了. 先来列举下这几个吧: screen.availHeight.screen.availWid ...
- Android获取屏幕实际高度跟显示高度，判断Android设备是否拥有虚拟功能键
//获取屏幕尺寸,不包括虚拟功能高度 getWindowManager().getDefaultDisplay().getHeight(); 获取屏幕原始尺寸高度,包括虚拟功能键高度, private ...
- Android获取屏幕的高度和宽度
方法一: DisplayMetrics metrics=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics( ...
- 用JS 和 jQery获取屏幕的高度和宽度
用的时候,网上找了下,放在一起,方便以后查阅 document.body.clientWidth document.body.offsetWidth(包括线宽)//网页可见区域宽 document.b ...
- js和jquery获取屏幕的高度
Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...
- 微信小程序 简单获取屏幕视口高度
由于小程序的宽度是固定的 750rpx,我们可以先用wx.getSystemInfo 来获取可使用窗口的宽高(并非rpx),结合750rpx的宽度算出比例,再用比例来算出高度 let that = t ...
- js 获取 屏幕 可用高度...
document.documentElement.clientWidth 此方法适用于手机... document.documentElement.clientHeight (浏览器(手机或电脑)可用 ...
- android之获取屏幕的宽度和高度
获取屏幕的宽度和高度: 方法一: //获取屏幕的宽度 public static int getScreenWidth(Context context) { WindowManager manager ...
随机推荐
- 20191028 牛客网CSP-S Round2019-1
花了 \(30min\) 打了 \(180\) 分的暴力... 仓鼠的石子游戏 问题描述 链接:https://ac.nowcoder.com/acm/contest/1100/A 仓鼠和兔子被禁止玩 ...
- java中的转义字符（遇到再进一步总结）
一.常见的转义字符转移字符对应的英文是escape character , 转义字符串(Escape Sequence)字母前面加上捺斜线""来表示常见的那些不能显示的ASCII字 ...
- Centos7 yum安装MySQL5.7.25
1 下载并安装MySQL官方的 Yum Repository[root@localhost ~]# wget -i -c http://dev.mysql.com/get/mysql57-commun ...
- goroutine使用
Goroutine是建立在线程之上的轻量级的抽象.它允许我们以非常低的代价在同一个地址空间中并行地执行多个函数或者方法.相比于线程,它的创建和销毁的代价要小很多,并且它的调度是独立于线程的.在gola ...
- linux字体，bashrc的问题的解决
0.查看文件 :set ff #查看文件类型 这里是fileformat=unix :set ff=dos 设置为dos模式, 也可以用 sed -i 's/$/\r/' :set ff=unix 设 ...
- 【BZOJ3534】[SDOI2014] 重建（矩阵树定理）
点此看题面 大致题意: 给你一张图,每条边有一定存在概率.求存在的图刚好为一棵树的概率. 矩阵树定理是什么 如果您不会矩阵树定理,可以看看蒟蒻的这篇博客:初学矩阵树定理. 矩阵树定理的应用 此题中,直 ...
- 【2019.7.20 NOIP模拟赛 T1】A（A）（暴搜）
打表+暴搜 这道题目,显然是需要打表的,不过打表的方式可以有很多. 我是打了两个表,分别表示每个数字所需的火柴棒根数以及从一个数字到另一个数字,除了需要去除或加入的火柴棒外,至少需要几根火柴棒. 然后 ...
- react、less、antd-mobile 报错Inline JavaScript is not enabled. Is it set in your options?
增加less-loader里面的配置.如图或者降级less到2.x版本
- iOS 一个项目添加多个TARGET
项目开发中会存在测试.正式等不同环境,需对应不同接口Host地址.项目名称等等配置.如果每次只有一个项目target的话每次打包的时候替换会很麻烦,而且容易出错.所以我们可以通过创建多个不同配置的ta ...
- redis命令之 ----SortedSed（有序集合）
ZADD ZADD key score member [[score member] [score member] ...] 将一个或多个 member 元素及其 score 值加入到有序集 key ...