vue 中nextTick的用法

最新推荐文章于 2025-11-18 09:30:33 发布

原创最新推荐文章于 2025-11-18 09:30:33 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

vuejs 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个简单的示例展示了如何使用Vue.js进行数据绑定及DOM更新。具体包括Vue实例的创建、数据属性设置、数据更新操作及使用Vue.nextTick()确保DOM完成更新后的处理。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head>
<body>
<div id="example">{{message}}</div>
<script type="text/ecmascript">
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
console.log(vm.$el.textContent === 'new message')
// console.log( vm.$el.textContent === 'new message' // true)
// vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {//在下次dom更新循环之后执行的回调函数异步刷新队列
vm.$el.textContent === 'new message' // true
console.log(vm.$el.textContent === 'new message' )// true
})
</script>
</body>
</html>