Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

vue 如何动态获取浏览器的高度和宽度，对于某些小伙伴来说间直接是简单到不能再简单了，为什么要整理这篇文章呢，源于最近项目中有高度、宽度自适应需求，需要适应不同分辨率的高度及宽度，在不同分辨率下效果区别不会很大，而我正好带着一位实习生小伙伴，所以把这需求给他让他练练手，结果可想而知了，所以整理这篇文章也是为了给后面的小伙伴提供参考而已，好了废话不多说，直接上源码。
HTML 代码：

<div id="app" v-cloak>
   <div class="content" :style="contentStyleObj"></div>
</div>

javascript 代码：

export default {
  name: 'App',
  data () {
　　return {
     contentStyleObj:{
            height:'',
            width:''
        },
　　}
  },
  components:{
  },

  methods:{
    getHeight(){
        // 获取浏览器高度，减去顶部导航栏的值，70 该值也可以动态获取
        this.contentStyleObj.height=window.innerHeight-70+'px';
        this.contentStyleObj.width=window.innerWidth-250+'px';
    }
  },

  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
    console.log(this.contentStyleObj);
  },

  destroyed(){
    window.removeEventListener('resize', this.getHeight)
  }
}

效果如下：

以上关于Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。