$nextTick的使用

什么是$nextTick呢？

它就是用来知道什么时候DOM更新完成的

实例

有一个div，默认使用v-if（或者v-show都是可以的）将其隐藏，定义v-if的默认状态为false，点击一个按钮，改变v-if定义的值，让它显示并且拿到div内的内容

上代码

<div id="app">
    <div id="div" v-if="showDiv">hello</div>   
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        showDiv : false 
    },
    methods:{
        getText(){
            this.showDiv = true; //改变状态为true 之后获取div内容
            this.$nextTick(function(){
            //实际上，在执行this.showDiv=true时，div仍然还是没有被创建出来，直到下一个vue事件循环，才开始创建。$nextTick就是用来知道什么时候DOM更新完成的，所以这个时候就要用到$nextTick了。
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>