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. tableview中头部信息

    //创建tableview中头部的文件#define kPadding 10 #define kIconWidth 100 #define kIconHeight 100 #define kCount ...

  2. 可扩展的Web系统和分布式系统(Scalable Web Architecture and Distributed Systems)

    Open source software has become a fundamental building block for some of the biggest websites. And a ...

  3. iOS 设备的CPU架构以及查看framework支持架构

    记录一下,感觉摘录的还是比较全的: 模拟器:4s-5: i3865s-7 Plus: x86_64 真机(iOS设备):armv6: iPhone.iPhone 2.iPhone 3G.iPod To ...

  4. Python字典按值排序的方法

    Python字典按值排序的方法: 法1: (默认升序排序,加  reverse = True 指定为降序排序) # sorted的结果是一个list dic1SortList = sorted( di ...

  5. java struts2入门学习---异常处理和类型转换

    一.struts2对异常的处理 1.自定义局部异常: <action> <exception-mapping result="sonException" exce ...

  6. git学习笔记(四)—— 分支管理

    一.创建与合并分支 git branch //查看分支 git branch <name> //创建分支 git checkout <name> //切换分支 git chec ...

  7. <welcome-file>index.action</welcome-file>直接设置action,404和struts2中的解决方案

    这几天的项目页面的访问全部改为.action访问,在修改首页时遇到了问题.将web.xml文件中<welcome-file>index.action</welcome-file> ...

  8. 【C语言】练习3-5

     题目来源:<The C programming language>中的习题P51  练习2-1:  编写函数itob(n, s, b),将整数n转换为以b为底的数,并将转换结果以字符的形 ...

  9. MySQL USING 和 HAVING 用法

    USING 用于表连接时给定连接条件(可以理解为简写形式),如 SELECT * FROM table1 JOIN table2 ON table1.id = table2.id   使用 USING ...

  10. C++虚函数工作原理

    一.虚函数的工作原理      虚函数的实现要求对象携带额外的信息,这些信息用于在运行时确定该对象应该调用哪一个虚函数.典型情况下,这一信息具有一种被称为 vptr(virtual table poi ...