实时监听 一个元素的宽度和高度

1.需求： 宽度发生变化 ，盒子的高度与盒子的宽度的大小一样

图片：

宽度变小

 宽度变大

 2.操作

 （1）设置监听的DOM节点

        

 方式一

 方式二

 (2)方式二代码

mounted() {
    const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            console.log(entry.target.offsetWidth)
            this.$refs.imgvideoitem.style='height:' + entry.target.offsetWidth +'px'
        }
    });
    resizeObserver.observe(document.querySelector('.img-video-item'));
},

（2）方式一

const resizeObserver = new ResizeObserver(items=> {
            items.forEach(item => {
                //赋值给ref=imgvideoitem的这个DOM节点高度等于宽度  注意有时又不管用
                this.$refs.imgvideoitem.style='height:' + item.target.offsetWidth +'px';
                //上面的有时候不管用   可以把监听到盒子的宽度数给height变量  再在行内元素上通过styles属性添加  
                this.height = item.target.offsetWidth;
            })
            
            // for (let item of items) {
            //    this.$refs.imgvideoitem.style='height:' + item.target.offsetWidth +'px';
            //    this.height = item.target.offsetWidth;
            // }
});
//监听类名为img-video-item的盒子
resizeObserver.observe(document.querySelector('.img-video-item'));

上面也可以反过来   通过改变高度来改变宽度