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 ...
随机推荐
- 【BZOJ2655】calc（拉格朗日插值）
bzoj 题意: 给出\(n\),现在要生成这\(n\)个数,每个数有一个值域\([1,A]\).同时要求这\(n\)个数两两不相同. 问一共有多少种方案. 思路: 因为\(A\)很大,同时随着值域的 ...
- VLAN实验（5）三层交换
1.选择1台S5700和3台pc机,并根据实验编址完成此拓扑图. 2.检查连通性 (1)因为mengyu-PC1和mengyu-PC2在一个地址段上,可以ping通 (2)因为mengyu-PC1和m ...
- apache配置文件详解（中英文对照版）
# This is the main Apache server configuration file. It contains the # configuration directives that ...
- pycharm 快速启动Django项目和python程序
Django 设置 *.py
- IntelliJ IDEA常用配置（三）
提示:对于一些通用的设置可以配置成全局的. 1. 主题配置 File - Settings - Color Scheme,默认的是Default(一个白色主题),Darcula是一个黑色主题. 我们也 ...
- luoguP1791 [国家集训队]人员雇佣
题意 考虑先将所有价值加上,之后用最小割求最小代价. 考虑每个点对\((i,j)\),我们这样建边: 1.源点向每个点i连\(\sum\limits E_{i,j}\)容量的边. 2.每个点向汇点连雇 ...
- Python 协程 (Coroutine)
协程 (Coroutine) 什么是协程 协程(微线程)是比线程更轻量化的存在,像一个进程可以拥有多个线程一样,一个线程也可以拥有多个协程 最重要的是,协程不是被操作系统内核所管理,而完全是由程序所控 ...
- 记录错误or日记(更新中)
前言: 从2018.8-17开始记录 本篇随笔记录做题时的小错误(大多数),考试总结(懒得总结了),做过的每个题的错误 2019.12.7 傻逼学校,给我三个小时假期给你们做题挣工资 2019.11. ...
- pwntools出现的一些问题
pwntools用的好好的突然就不能用了总结了一些问题:ImportError:cannot import name ENUM_P_TYPE 解决方法为:将/usr/local/lib/python2 ...
- 数据仓库009 - SQL命令实战 - where GROUP BY join 部门综合案例
一.where条件 WHERE 子句中主要的运算符,可以在 WHERE 子句中使用,如下表: 运算符 描述 = 等于 <> 不等于.注释:在 SQL 的一些版本中,该操作符可被写成 != ...