使用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. python的常见内置模块之-----time

    1.time模块 a.时间戳:print(time.time())  从1970年到现在的时间,秒数 import time print(time.time()) >>>157448 ...

  2. 浅谈HTTP中Get与Post的区别【转】

    转自http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html#commentform 感谢LZ分享 Http定义了与服务器交互的不同方法 ...

  3. golang之reflection

    反射就是程序能够在运行时检查变量和值,求出它们的类型. reflect包实现运行时反射. 创建一个接收任何数据类型任何数值的查询string: func createQuery(q interface ...

  4. Kali下的内网劫持(一)

    ettercap利用计算机在局域网内进行通信的ARP协议的缺陷进行攻击,在目标主机与服务器之间充当中间人,嗅探两者之间的数据流量,从中窃取用户的数据信息,那么接下来我就给大家演示一下客户端的图片是怎么 ...

  5. Linux之RHEL7root密码破解(一)

    很多时候我们都会有这样的经历,各种密码,各种复杂,忘记了怎么办???Windows的有关密码忘记了是可以通过相关的邮箱啊手机号等等是可以 找回的,那么Linux的root密码忘记了,该怎么办呢?那么接 ...

  6. moviepy草码

    第一下. # coding=utf-8 from moviepy.editor import * from moviepy.video.tools.subtitles import Subtitles ...

  7. Kotlin协程第一个示例剖析及Kotlin线程使用技巧

    Kotlin协程第一个示例剖析: 上一次https://www.cnblogs.com/webor2006/p/11712521.html已经对Kotlin中的协程有了理论化的了解了,这次则用代码来直 ...

  8. C# 上传大文件

    上传大文件首先要修改web.config文件,否则上传报错.在web.config添加如下配置maxRequestLength表示能上传的最大文件值,单位是KB,requestLengthDiskTh ...

  9. mssql 清理死锁

    -存储过程 我们可以使用以下存储过程来检测,就可以查出引起死锁的进程和SQL语句.SQL Server自带的系统存储过程sp_who和sp_lock也可以用来查找阻塞和死锁, 但没有这里介绍的方法好用 ...

  10. go语言的坑

    go语言在for循环中遍历的临时变量地址是一样的 func main() { //SetLogConfToEtcd() for i := 0; i < 5; i++ { a := i fmt.P ...