答:下次 DOM 更新循环结束之后再执⾏延迟回调,⽤于获得更新后的 DOM。
/*...*/
<div id="app">
<div v-if='msg'>{{msg}}</div>
<div v-if='msg1'>{{msg1}}</div>
<div v-if='msg2'>{{msg2}}</div>
<button @click='handleClick'>点击一下</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
msg1: '',
msg2: '',
},
methods: {
handleClick(e) {
this.msg = 'hello Vue';
this.msg1 = e.target.parentElement.children[0].innerHTML;
this.$nextTick(() => {
this.msg2 = e.target.parentElement.children[0].innerHTML
})
}
}
})
</script>
/*...*/
可以对比各个msg的变化,效果如下:
![]() |