vue 宽度自适应

<template>
<div class="my">
    <div class="mydiv">
        <div class="mytest" :style="testObj"></div>
        <div class="mytest" :style="testObj"></div>
        <div class="mytest" :style="testObj"></div>
    </div>
    <div class="box">
        <div class="left_box" :style="boxObj"></div>
        <div class="right_box" :style="boxObj"></div>
    </div>

</div>
</template>

<script>
    export default {
        name: "My",
        data(){
            return{
                styObj:{
                    height:''
                },
                testObj:{
                    height:''
                },
                boxObj:{
                    height:''
                },

            }
        },
        mounted(){
            //监听自适应
            window.addEventListener('resize', this.changeHeight);
            this.changeHeight();
        },
        methods:{
            changeHeight(){
                this.styObj.height=window.innerHeight+'px';
                this.testObj.height=document.documentElement.clientHeight*0.5+ 'px';
                this.boxObj.height=document.documentElement.clientHeight*0.4+ 'px';
                console.log('11',this.styObj.height)
                console.log('1122',this.testObj.height)
                console.log('333',this.boxObj.height)

            }

        },
        beforeDestroy() {
            // 移除绑定的listenResizeFn事件监听
            window.removeEventListener("resize",this.changeHeight);
        }

    }
</script>

<style scoped>
    .my{
        width:80%;
        margin: 0 auto;
        background: #ccc;

    }
    .mydiv{

        display: flex;
        justify-content: space-between;

    }
    .mytest{
        flex: 6;
        width: 24%;
        margin: 20px auto;
        background: red;
        border: 1px solid #ccc;
    }
    .box{
        display: flex;
        justify-content: space-between;

    }
    .left_box{
        flex: 18;
        background: #1989fa;
    }
    .right_box{
        flex: 6;
        background: #07c160;
    }

</style>