Vue中监听数据是否渲染完成,完成后执行相关方法

复制代码
var vm = new Vue({
    data: { list: [] },
    methods: {
        changeDom: function () {
            this.$nextTick(function(){
                //需要执行的方法
            });
        }
    },
    watch: {
        list: function () {
            this.$nextTick(function(){
                //需要执行的方法
            });
        }
    }
})
复制代码

如下应用示例(有一个滚动事件,必须要页面渲染完成后才可以执行):

 

复制代码
var vue2 = new Vue({
        el: "#vueNotice",
        data: { list: [] },
        mounted: function () {
            this.newlyData();
        },        
        methods: {
            newlyData() {
                var self = this;
                ajaxPureRequest('/sales/GetNewly', 'get', null, false, function (rs) {
                    if (rs.code == "200") {
                        self.list = rs.res.data;
                        if (rs.res.data.length==0) {
                            $("#notice").css("display", "none");
                        }                            
                    }
                });
              
            }
        },
        watch: {
            list: function () {
                this.$nextTick(function () {
                    $('#notice').rollSlide({
                        orientation: 'top',
                        num: 1,
                        v: 2500,
                        isRoll: true
                    });
                })
            }           
        },
    });
复制代码

 

posted @   James·wang  阅读(1994)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2020-08-04 chosen.jquery.min.js动态添加下拉内容
点击右上角即可分享
微信分享提示