vue什么时候才能操作dom?

大伯格
  • 371
mounted() {
    this.$refs.index.style.paddingBottom = this.$refs.sus.clientHeight + 'px'
}

试着在mounted声明周期去获取某元素的高度,但是仍然获取到的是0,即使是DOMContentLoad 或者 window.onload 后仍然取不到。

那vue要什么时候才能获取dom的实际计算结果?

回复
阅读 10.9k
8 个回答

就是在mounted的时候,如果你要获取的元素高度是动态由数据撑起来的需要使用this.$nextTick

<div id="app">
    <div id="example">
    <my-component></my-component>
  </div>
</div>
new Vue({
  template: `<h1 ref=test>1</h1>`,
  created: function(){
    console.log('created')
    debugger
  },
  mounted: function(){
    console.log('mounted')
    console.log(this.$refs.test.clientHeight)
    debugger
  }
}).$mount('#app')

可测试上方代码。

试试看this.$nextTick

mounted (){
    this.$nextTick(() => {
        this.$refs.index.style.paddingBottom = this.$refs.sus.clientHeight + 'px';
    });
}

不要用$refs去查节点,它不是响应式的。

绑定对应的事件就可以

methods:{
    this.$nextTick(() => {
        this.$refs.index.style.paddingBottom = this.$refs.sus.clientHeight + 'px';
    })
}

this.$nextTick 后可以做,但是为什么要去通过dom获取高度,什么需求,说出来,可能存在不需要操作dom的方法

created的时候,看声明周期就知道了。clipboard.png

宣传栏