vue如何动态设置div的top值？

Question

下面这样不起作用是怎么回事？？

<div class="yindao" ref="yindao" v-if="yindao">
    
</div>

canyu(){
      this.yindao = true
      this.$refs.yindao.style.top = 1000 + 'px'; 
}

.yindao{
  width: 100%;
  height: 42vh;
  position: absolute;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  z-index: 999
}

Answer 1

是这样的，v-if 用来判定是否摧毁对应元素，而 this.$refs.yindao.style.top 是需要获取改元素的数据，但是这两个数据是一块更新的，详情请查看虚拟DOM的相关介绍，所以如果 this.yindao 为false的话就代表本身没这个元素，所以就无法设置 this.$refs.yindao.style.top。
所以解决方法只要解决更新不同步或者不摧毁元素来隐藏即可。
这有两个解决方案：
1、v-if 换成 v-show
2、this.$nextTick(()=>{ this.$refs.yindao.style.top = 1000 + 'px' })