VUE动态获取浏览器宽高，动态获取元素宽高，动态设置元素的宽高或样式

动态获取浏览器宽高

created(){window.addEventListener('resize', this.GetWindowInfo); //注册监听器this.GetWindowInfo() //页面创建时先调用一次},methods:{GetWindowInfo(){var width = window.innerWidth // 宽var height = window.innerHeight // 高}},destroyed(){window.removeEventListener('resize', this.GetWindowInfo)}

动态获取元素宽高

在标签中定义ref属性，用this.$refs.自定义名称.clientHeight / clientWidth去获取。但是this.$refs可能会出现undefined的问题，解决方法：- 写在method中，使用 this.$nextTick(() => {}) 等页面渲染好再调用，这样就可以了并且此方法获取的宽高不包括border的值

代码：

// html<div ref="container"></div>// jsGetDomInfo() {this.$nextTick(() => {var domWidth = this.$refs.container.clientWidth // 宽var domHeight = this.$refs.container.clientHeight // 高})}

动态设置元素的宽高或样式

<div :style="{width: width}"></div>data() {return {width: ''}},setInfo() {this.width = width - domWidth + 'px'}