每天一点点——vuejs

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kdy1994/blog/819893

文章标签：

#javascript #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

vuejs列表渲染过后，如果想在函数内修改绑定数据例如：

this.unSelectedArr = [];//unSelectedArr 是自定义的名称在vue的data中定义

这种修改必须待程序退出函数后才会重写渲染页面，假如想要在当前改变数据后做些什么，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如：

<div id="example">{{message}}</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

不知道具体写在哪？还是不太会用？那就看看下面的例子：

在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue ，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：

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

转载于:https://my.oschina.net/kdy1994/blog/819893