vue 渲染完成事件

作者：CharTen链接：https://www.zhihu.com/question/47652547/answer/119592520来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。vue里面本身带有两个回调函数：一个是`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。另一个是`Vue.$nextTick(callback)`，当d

mglgls

23718人浏览 · 2018-05-04 14:30:12

mglgls · 2018-05-04 14:30:12 发布

作者：CharTen
链接：https://www.zhihu.com/question/47652547/answer/119592520
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue里面本身带有两个回调函数：
一个是`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。
另一个是`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。
栗子：

...
<ul id="demo">
    <li v-for="item in list">{{item}}</div>
</ul>
...

new Vue({
    el:'#demo',
    data:{
        list=[0,1,2,3,4,5,6,7,8,9,10]
    },
    methods:{
        push:function(){
            this.list.push(11);
            this.nextTick(function(){
                alert('数据已经更新')
            });
            this.$nextTick(function(){
                alert('v-for渲染已经完成')
            })
        }
    }
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^