Vuejs中v-if v-show无法获取div高度

最近在单页应用开发中尝试使用vue.js,发现无法获取v-if和v-show标记的dom高度。

高度代码

<div id="testVueHeight">
  <button v-on:click="showBigDiv">变</button>
  <div id="bigdiv" v-if="show" style="width:300px; height:300px;background:red;">
  </div>

</div>

<script type="text/javascript">
  var vm = new Vue({
    el   : 'body',
    data : {
      show : false
    },
    methods : {
      showBigDiv : function() {
        this.show = true;
        console.log( document.body.clientHeight );
      }
    }
  });
</script>

运行代码发现只能显示出原来button的高度,也就是说在执行 console.log( document.body.clientHeight ) 的时候并没有加载完成dom,如图:

解决方案

使用vuejs中的 $nextTick 函数可以有效解决这个问题,可以参考官方Api:$nextTick

修正后的js代码如下:

<script type="text/javascript">
  var vm = new Vue({
    el   : 'body',
    data : {
      show : false
    },
    methods : {
      showBigDiv : function() {
        this.show = true;
        console.log( document.body.clientHeight );
        this.$nextTick(function () {
          console.log( 'dom加载完成' );
          console.log( document.body.clientHeight );
        })
      }
    }
  });
</script>

运行结果:

 标签: JavaScript, vuejs, 前端开发

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。



关于我

about me

sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。

联系我

最新文章