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

原创

wsw9284 2021-08-10 11:34:38 博主文章分类：Vue ©著作权

文章标签 页面渲染 css ajax ide vue 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wsw9284的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

如下应用示例（有一个滚动事件，必须要页面渲染完成后才可以执行）：

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

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
                    });
                })
            }           
        },
    });