HTML:

<div ref="page"></div>

JS:

data(){
return{
clientHeight:'',
}
}
mounted(){
this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
let that = this;
window.onresize = function(){
this.clientHeight = `${document.documentElement.clientHeight}`;
if(that.$refs.page){
that.$refs.page.style.minHeight = clientHeight - + 'px';
}
}
}
watch:{
clientHeight(){ //如果clientHeight 发生改变,这个函数就会运行
this.changeFixed(this.clientHeight)
}
}
methods:{
  changeFixed(clientHeight){
    if(this.$refs.page){
      this.$refs.page.style.minHeight = clientHeight - + 'px';
    }
  }
}

vue动态监听浏览器窗口高度的更多相关文章

  1. vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高

    1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...

  2. 用jQuery监听浏览器窗口的变化

    $(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...

  3. vue监听浏览器窗口大小变化

    首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...

  4. vue---监听浏览器窗口的宽度

    使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化. <template>     <div class="conte ...

  5. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  6. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  7. 详解vuex结合localstorage动态监听storage的变化

    这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...

  8. JS实时监听浏览器宽度的变化

    boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...

  9. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

随机推荐

  1. CF 1178E Archaeology 题解

    题面 这道题竟然是E?还是洛谷中的黑题? wow~!! 于是就做了一下: 然后一下就A了:(这并不代表想的容易,而是写的容易) 这道题就是骗人的!! 什么manacher,什么回文自动机,去靠一边站着 ...

  2. <<C++ Primer>> 第 5 章 语句

    术语表 第 5 章 语句 块(block): 包围在花括号内的由 0 条或多条语句组成的序列.块也是一条语句,所以只要是能使用语句的地方,就可以使用块.    break语句(break statem ...

  3. c++ try_throw_catch异常处理

    参考https://www.cnblogs.com/xiaojianliu/articles/8900795.html 在程序设计时,针对不同的异常情况,预先设定异常信息,在程序运行时,根据异常提示信 ...

  4. $Prufer$序列

    \(Prufer\)序列 \(Prufer\)序列与树的相互转换: 树->\(Prufer\)序列 找到一个编号最小的叶子结点,把这个点删掉并且把跟他连着的那个点的编号加入\(Prufer\)序 ...

  5. python中的生成器、迭代器、闭包、装饰器

    迭代器 迭代是访问集合元素的一种方式.迭代器是一个可以记住遍历的位置的对象.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退. 可迭代对象 以直接作用于 for ...

  6. pgsql物理复制(pgsql 备库的搭建以及角色互换,提升)

    结构图如下: Postgresql早在9.0版本开始支持物理复制,也称为流复制,通过从实例级复制出一个与主库一模一样的备库.流复制同步方式有同步,异步两种,如果主节点和备节点不是很忙,通常异步模式下备 ...

  7. 缓存---LRU算法实现

    2.LRU   以下是基于双向链表+HashMap的LRU算法实现,对算法的解释如下:   设置一个map存放对应的键和值,同时设置一个双向链表,来保存最近最久未使用的关系,如果访问一个键,键存在于m ...

  8. 剑指offer-7:调整数组顺序使奇数位于偶数前面

    一.相对位置可以改变 1.题目 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分. 2.分析 不考虑相对位置,可以类比快排,用左右 ...

  9. express-handlebars

    https://www.npmjs.com/package/express-handlebars

  10. 升级完pip后出错:Traceback (most recent call last): File "/usr/bin/pip", line 11, in <module> sys.exit(__main__.main())

    今天在ubuntu上升级了pip,之后执行pip命令的时候就报错了: Traceback (most recent call last):   File "/usr/bin/pip" ...