雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。比如一個新聞滾動的列表項。如果在這里需要操作dom, 應該是等待 Vue 完成更新 DOM之后。

一、新聞滾動列表

1、在created函數中獲取后臺數據；

2、模板引擎中用v-for生成列表項；

3、調用滾動函數，假設該滾動函數式原聲方法寫的；

4、什么時候開始調用滾動函數比較合適呢？

?

二、this.$nextTick()

官方解釋：將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Vue.component('example', { ??template:?'<span>{{ message }}</span>', ??data:?function?() { ????return?{ ??????message:?'not updated' ????} ??}, ??methods: { ????updateMessage:?function?() { ??????this.message =?'updated' ??????console.log(this.$el.textContent)?// => 'not updated' ??????this.$nextTick(function?() { ????????console.log(this.$el.textContent)?// => 'updated' ??????}) ????} ??} })

?

三、新聞滾動列表中的this.$nextTick()放哪里？

　　因為數據是根據請求之后獲取的，所以應該放到請求的回調函數里面。

四、注意this.nextTick()

1 2	this.nextTick(callback)，當數據發生變化，更新后執行回調。 this.$nextTick(callback)，當dom發生變化，更新后執行的回調。

轉載于:https://www.cnblogs.com/mmzuo-798/p/9318053.html

總結

以上是生活随笔為你收集整理的在vue中操作DOM--this.$nextTick()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。