您现在的位置是：网站首页> 编程资料编程资料

vue.js动态设置VueComponent高度遇到的问题及解决_vue.js_

2023-05-24 408人已围观

简介 vue.js动态设置VueComponent高度遇到的问题及解决_vue.js_

vue.js动态设置VueComponent高度的问题

1.获取HTML元素高度

     {{data.id}}

mounted(){     console.log(this.$refs.abc[0].clientHeight);//获取第一个div元素的高度     this.$refs.abc[0].style.height = 100 +'px';//动态设置HTML元素高度 }

注意：

1.此处用到v-for循环，this.$refs.abc返回的是个HTMLElement数组
2.this.$refs在DOM元素挂载完成后才可以调用
3.不可以通过this.$refs.abc[0].clientHeight = 100 +'px'设置高度，因为clientHeight属性是只读的，不允许修改。
4.注意加'px'单位

2.获取VueComponent标签生成的元素的高度

           {{data.id}}
               {{data.id}}
     mounted(){     for(let i = 0; i < this.list.length; i++){       console.log(this.$refs.leftCol[i].$el.clientHeight);//获取左边列元素的高度       console.log(this.$refs.rightCol[i].$el.clientHeight);//获取右边列元素的高度       this.$refs.leftCol[0].$el.style.height = 100 +'px';//动态设置VueComponent元素高度         }; }

注意：

this.$refs.leftCol返回的是个VueComponent数组，this.$refs.leftCol[i]返回的是个VueComponent元素，而不是HTMLElement

3.判断一个对象是jQuery对象还是DOM对象

var jqueryObject = $("#a"); jqueryObject instanceof jQuery; //jqueryObject 是jQuery对象 var domObject = document.querySelector("#a"); domObject instanceof jQuery; //domObject不是jQuery对象 domObject instanceof HTMLElement; //domObject是DOM对象