VUE监听resize

yuyu_2019

已于 2022-06-24 11:01:47 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：分辨率兼容的精益求精 VUE 文章标签： vue.js 前端 javascript

于 2020-12-22 13:38:00 首次发布

本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/111540079

VUE 同时被 2 个专栏收录

26 篇文章

订阅专栏

分辨率兼容的精益求精

4 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单自适应高度的DIV组件案例。该组件能够根据浏览器窗口大小的变化调整自身的高度，并通过监听窗口尺寸变化来实时更新高度值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="bg"
   :style="{'height':windowHeight+'px'}">
  pc端页面
</div>

data () {
    return {
      windowHeight: window.innerHeight
    }
}

mounted () {
    window.onresize = () => {
      this.windowHeight = window.innerHeight
    }
}

watch: {
  'windowHeight': function (newVal, oldVal) { //监听屏幕宽度变化
    this.windowHeight = newVal
    console.log(newVal)
  }
}