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 ...
随机推荐
- 【poj3207】Ikki's Story IV - Panda's Trick（2-sat）
传送门 题意: 给出一个圆,圆上有\(n\)个点,依次为\(0,1,\cdots,n-1\). 现在要连接\(m\)对点,每次连接时可以直接从里面连,也可以从外面连. 最后问,连完这\(m\)对点后, ...
- 【洛谷P4589】[TJOI2018]智力竞赛（二分+最小链覆盖）
洛谷 题意: 给出一个\(DAG\),现在要选出\(n+1\)条可相交的链来覆盖,最终使得未被覆盖的点集中,权值最小的点的权值最大. 思路: 显然最终的答案具有单调性,故直接二分答案来判断: 直接将小 ...
- [C1W3] Neural Networks and Deep Learning - Shallow neural networks
第三周:浅层神经网络(Shallow neural networks) 神经网络概述(Neural Network Overview) 本周你将学习如何实现一个神经网络.在我们深入学习具体技术之前,我 ...
- Kafka为什么不支持读写分离得原因？-干货
在 Kafka 中,出产者写入音讯.顾客读取音讯的操作都是与 leader 副本进行交互的,从 而结束的是一种主写主读的出产消费模型.数据库.Redis 等都具有主写主读的功用,与此同时还支撑主写从读 ...
- SecureCRT 8.1工具下载和破解附Xshell6
附教程:https://jingyan.baidu.com/article/eae078275917861fec548592.html 这一篇教程实际上已经说得非常明确了,只需要把注册机放在和secu ...
- HDU 6298(数学)
题意是给出一个数,找出这个数的三个因子且这三个因子的和等于这个数,输出满足条件的乘积最大的一组因子的乘积,如果不存在这样的因子,就输出 -1. 第一次 wa 了,因为把题目中的 x | n 当做了位或 ...
- 数据仓库010 - MySQL查看所有存储过程,函数，视图，触发器
.查询数据库中的存储过程和函数 方法一: select `name` from mysql.proc where db = 'your_db_name' and `type` = 'PROCEDURE ...
- Django常用知识整理
Django 的认识,面试题 1. 对Django的认识? #1.Django是走大而全的方向,它最出名的是其全自动化的管理后台:只需要使用起ORM,做简单的对象定义,它就能自动生成数据库结构.以及全 ...
- 安装更新时出现一些问题，但我们稍后会重试。如果你继续看到此错误，并且想要搜索 Web 或联系支持人员以获取相关信息，以下信息可能会对你有帮助: (0x80070426)
安装更新时出现一些问题,但我们稍后会重试.如果你继续看到此错误,并且想要搜索 Web 或联系支持人员以获取相关信息,以下信息可能会对你有帮助: (0x80070426) https://answers ...
- 联邦学习PySyft
Steps involved in the Federated Learning Approach The mobile devices download the global ML model Da ...