1.在data中设置:

  tableHeight:"500",
screenHeight:window.innerHeight,

2.在mounted中设置:

   mounted() {
const that = this
window.onresize =() =>{
return (()=>{
window.screenHeight = window.innerHeight
this.screenHeight = window.screenHeight;
})()
}
},

3.在watch中监听:

   watch:{
screenHeight(val){
this.screenHeight = val
this.tableHeight = this.screenHeight - 250
}
},

vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高的更多相关文章

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

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

  2. vue监听页面大小变化重新刷新布局

    在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...

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

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

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

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

  5. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

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

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

  7. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  8. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  9. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 屏蔽alert弹框下面一层的操作

    需求: 给alert框戴个套. 屏蔽下层页面的操作. 搞这个花里胡哨的东西. 还一baidu全都是长得一样的答案. 神魔恋. /** * Tip Message像alert一样 */ function ...

  2. iOS 10 的一个重要更新-用 UIViewPropertyAnimator 编写动画

    曾经的黑暗年代 用基于 block 的 UIView animation 来编写 view 属性(frame, transform 等等)变化的动画非常简单.只需要短短几行代码: view.alpha ...

  3. lu协程练习

    生产者和消费者问题:当协程调用yield时,从一个悬而未决的resume中返回.简单的协程练习: function receive() local status,value = coroutine.r ...

  4. activiti实战--第一章--认识Activiti

    学习资料:<Activiti实战> 第一章 认识Activiti 内容概览:讲解activiti的特点.接口概览.架构等基本信息. 1.3 Activiti的特点 1.使用mybatis ...

  5. C#程序证书创建工具 (Makecert.exe)

    原文地址:https://msdn.microsoft.com/zh-cn/library/bfsktky3(VS.80).aspx 证书创建工具生成仅用于测试目的的 X.509 证书.它创建用于数字 ...

  6. 【webservice】使用命令wsimport构建WebService客户端

    wsimport命令介绍 在JDK的bin文件夹中,有一个wsimport.exe,这个工具依据wsdl文件生成相应的类文件,然后用这些类文件,就可以像调用本地的类一样调用WebService提供的方 ...

  7. Newtonsoft.Json C# Json序列化和反序列化工具的使用、类型方法大全 C# 算法题系列(二) 各位相加、整数反转、回文数、罗马数字转整数 C# 算法题系列(一) 两数之和、无重复字符的最长子串 DateTime Tips c#发送邮件,可发送多个附件 MVC图片上传详解

    Newtonsoft.Json C# Json序列化和反序列化工具的使用.类型方法大全   Newtonsoft.Json Newtonsoft.Json 是.Net平台操作Json的工具,他的介绍就 ...

  8. mysql homedir迁移

    随着数据库的增长,innodb文件和日志文件会越来越大,如果是默认安装的mysql,这些文件一般是放在 /usr/lib/mysql 下面进行转移: 1,安全关闭mysql mysqladmin -u ...

  9. [企业化NET]Window Server 2008 R2[1]-服务器基本安装即问题解决记录

    1.  服务器基本安装即问题解决记录      √ 2.  SVN环境搭建和客户端使用 2.1  服务端 和 客户端 安装    √ 2.2  项目建立与基本使用     √ 2.3  基本冲突解决, ...

  10. mvc 缓存页面 减轻服务器压力

    方法: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...