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. Python实现鸢尾花数据集分类问题——基于skearn的SVM

    Python实现鸢尾花数据集分类问题——基于skearn的SVM 代码如下: # !/usr/bin/env python # encoding: utf-8 __author__ = 'Xiaoli ...

  2. Gedit 有用插件介绍

    刚刚接触Ubuntu,对于高手们用的Vim,本人只能望尘莫及.但是,Ubuntu自带的Gedit让我找到了windows的感觉,而且在添加一些插件后更加喜欢这个工具了. gedit本身带有一些常用插件 ...

  3. Python之包管理工具

    安装Python包的过程中,经常涉及到distutils.setuptools.distribute.setup.py.easy_install.easy_install和pip等等. distuil ...

  4. Linux下面安装和配置MySQL

    如何从MySQL官方Yum仓库安装MySQL5.6 首先我们需要从MySQL开发者网站下载Yum仓库文件 Download MySQL Yum Repository 从上面的连接地址下载:Red Ha ...

  5. TextView中显示链接 定义颜色

    <TextView android:id="@+id/textView" android:layout_width="match_parent" andr ...

  6. 创建一个已经存在数据的MySQL复制

    1.配置master库必须开启二进制日志和分配唯一的server id·如果没设置server-id或将其设置为0,master节点会拒绝slave的连接·建议在master节点设置innodb_fl ...

  7. sql用逗号连接多张表对应哪个join?

    转自:http://blog.csdn.net/huanghanqian/article/details/52847835 四种join的区别已老生常谈: INNER JOIN(也可简写为JOIN): ...

  8. PCM、G.729等常用VoIP编码的理论带宽计算

    可能通信背景的同学,一提到PCM编码,脑海里都能跳出来一个数值64K. 一.64KB还是64Kb? 64Kb! 二.哪里来的64Kb? CCITT规定抽样率为每秒8000KHz,每抽样值编8位码,所以 ...

  9. 64位FreeSWITCH编译安装(版本1.4.20)

    1.安装64位的CentOS6.5操作系统(勾选的服务器版本安装). 2.下载FreeSWITCH安装包以及关联的lib库.下载地址http://files.freeswitch.org/downlo ...

  10. ubuntu 安装python mysqldb

    sudo apt-get install python-mysqldb #!/usr/bin/python #-*-coding:utf-8-*- ''' This file include all ...