使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化。

<template>
    <div class="content" :style="height"></div>
</template> <script>
export default {
  name: 'App',
  data () {
  return {
height:'',
  }
  },
  components:{},
  methods:{
    getHeight(){
      this.height = window.innerHeight - + 'px';
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  destroyed(){
    window.removeEventListener('resize', this.getHeight)
  }
}
</script>

vue---监听浏览器窗口的宽度的更多相关文章

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

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

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

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

  3. vue动态监听浏览器窗口高度

    HTML: <div ref="page"></div> JS: data(){ return{ clientHeight:'', } } mounted( ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 注入 Istio sidecar

    注入 Istio sidecar 网格中的每个 Pod 都必须伴随一个 Istio 兼容的 Sidecar 一同运行. 下文中将会介绍两种把 Sidecar 注入到 Pod 中的方法:使用 istio ...

  2. kubernetes存储之GlusterFS

    目录 1.glusterfs概述 1.1.glusterfs简介 1.2.glusterfs特点 1.3.glusterfs卷的模式 2.heketi概述 3.部署heketi+glusterfs 3 ...

  3. Kotlin函数使用综述与显式返回类型分析

    位置参数与具名参数: 继续接着上一次https://www.cnblogs.com/webor2006/p/11498842.html的方法参数学习,再定义一个函数来说明具名参数的问题: 调用一下,先 ...

  4. Ubuntu创建启动器(快捷方式)的方式

    解压.tar.gz的navicat之后发现不能自动生成启动器了,研究了一下发现: 虽然不少带有图形界面的程序会在安装时自动在桌面上创建快捷方式,还有一些图形界面程序或者命令行程序可能需要你手动创建快捷 ...

  5. 前端Map封装源码

    源于后台思路,简单封装了一下Map插件,方便以后使用. function Map() { this.elements = new Array(); //获取MAP元素个数 this.size = fu ...

  6. 网站安全DDOS攻击及监测

    一. 监测 在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息.查看网络状态可以使用netstat.nmap等工具.若要查看实时的网络流量,监控TCP/IP连接等,则可以使用iftop ...

  7. py3+requests+json+xlwt,爬取拉勾招聘信息

    在拉勾搜索职位时,通过谷歌F12抓取请求信息 发现请求是一个post请求,参数为: 返回的是json数据 有了上面的基础,我们就可以构造请求了 然后对获取到的响应反序列化,这样就获取到了json格式的 ...

  8. Centos 6.5出现yum安装慢的情况

    最近在用Centos 6.5 的时候出现了这种情况, Loaded plugins: fastestmirror, refresh-packagekit, security Loading mirro ...

  9. 关于git clone远程仓库账户密码错误的问题

    这两天刚使用coding和git,但是在我第一次克隆coding上的项目的时候,提示输入账户和密码,当时我不知道这个账户和密码是指的哪个,就随便输入了,然后提示错误,,,,,, 之后每次克隆的时候都提 ...

  10. tensorflow API _ 6 (tf.gfile)

    一.gfile模块是什么 tf.gfile模块的主要角色是:1.提供一个接近Python文件对象的API,以及2.提供基于TensorFlow C ++ FileSystem API的实现. C ++ ...