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 ...
随机推荐
- Node.js—简介
一.Node.js是什么 1. 基本概述 Node.js是一个可以让JavaScript运行在服务器端的平台.它是一个为实时Web应用开发而诞生的平台,它从诞生之初就充分考虑了在实时响应.超大规模数据 ...
- unittest，requests，assertEqual实战演练
请求方式:POST请求url:https://api.apiopen.top/developerLogin请求参数:名称 类型 必须 描述 示例name string 是 账号 peakchaopas ...
- Centos 7 自动安装系统-pxe
一.简介 PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服 ...
- MySQL SQL DLL (数据定义语言)
CREATE CREATE DATABASE CREATE DATABASE 用于创建数据库 CREATE DATABASE new_database_name; CREATE TABLE CREAT ...
- Shell编程——运算符
1.declare命令: 声明变量的类型: -:给变量设定类型属性 +:给变量取消类型属性 -i:将变量声明为整数类型 -x:将变量声明为环境变量 -p:显示变量的类型 其中export是将num变为 ...
- 关于webpack的面试题
随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用:又如sass和less的代码浏览器也是不支持的. 而如果摒弃了这些开发框 ...
- MySQL实战45讲学习笔记：第四十讲
一.本节概述 在上一篇文章中,我提到 MySQL 对自增主键锁做了优化,尽量在申请到自增 id 以后,就释放自增锁. 因此,insert 语句是一个很轻量的操作.不过,这个结论对于“普通的 inser ...
- 基于Django的Rest Framework框架的认证组件
0|1一.认证组件的作用 在一个程序中有一些功能是需要登录才能使用的,原生Django中的auth组件可以用来解决这个认证问题,drf框架中也有对应的认证组件来解决这个问题. models.py ...
- Prometheus K8S中部署Alertmanager
Prometheus K8S中部署Alertmanager 设置告警和通知的主要步骤如下:一.部署Alertmanager二.配置Prometheus与Alertmanager通信三.配置告警 1. ...
- keepalived+Nginx实现主备保障Nginx的高可用。
1.什么是keepalived? Keepalived是集群管理中保证集群高可用的一个服务软件,用来防止单点故障. Keepalived的作用是检测web服务器的状态,如果有一台web服务器死机,或工 ...