(十三)Vue获取到元素

Vue获取元素步骤

(1) 第一步给元素加上ref属性。切记不要有- 因为数据是异步获取的所以不要加v-if否则为空

 <div class="goodsmenu"  ref="goodsmenu">

(2) 第二步获取元素的时候必须要放到this.$nextTick()里面

  this.$nextTick(function () {
               console.log(this.$refs.goodsmenu);
              })

(3) $nextTick的作用就是等待DOM渲染完成在加载

 this.$nextTick(function () {
               this.$refs.goodsmenu.style.color="red";
              })

(4) 获取到元素后，我想获取到元素距离页面的坐标可以用getBoundingClientRect()

  console.log(_this.$refs.goodsmenu.getBoundingClientRect());