#vue#获取浏览器视窗，动态修改div高度（附源码）

<template>
<div class="nav">
    <div class="nav_list" :style="{height: height +'px'}"></div>
</div>
</template>

<script>
export default {
    data () {
        return {
            //获取浏览器可视区域高度（包含滚动条）、
            //获取浏览器可视区域高度（不包含工具栏高度）、
            //获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的)
            height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        }
    },
    mounted() {
        window.addEventListener('resize',this.getHeight,false);
    },
    beforeDestroy() {
        window.addEventListener('resize',this.getHeight.false);
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
        },
    
    },
    }
</script>

<style lang= "scss" scoped>
.nav {
    .nav_list {
        background-color: pink;
    }
    
    .nav_list::-webkit-scrollbar {
        /*隐藏滚动条*/
        display: none;
    }
}
</style>

效果：