美文网首页Vue
Vue在生命周期中获取渲染到页面上元素的几个方式

Vue在生命周期中获取渲染到页面上元素的几个方式

作者: 愿你如夏日清凉的风 | 来源:发表于2017-09-05 16:09 被阅读233次
export default {
        name: 'home',
        data(){
            return {
                bannerImg: '',
                indexUrl: 'http://wx.chuangyejia.com/dev/newapi/hmxy/term/index?id=1',
                scheduleBase: {},
                courseData: [],
                tutorData: {},
                content: [],
                studentList: {}
            }
        },
        mounted(){
            let _this = this;
            this.$http.get(_this.indexUrl).then(({data:{code, data, jssdk, msg}})=> {
                if (code == 0) {
                    _this.content = data.info.contents;
                    _this.scheduleBase = data.base;
                    _this.courseData = data.course;
                    _this.tutorData = data.mentors;
                    _this.studentList = data.students;
                    Store.set('schedule-base', _this.scheduleBase);
                    Store.set('course-data', _this.courseData);
                    Store.set('tutor-data', _this.tutorData);
                    Store.set('student-list', _this.studentList);
                    this.$nextTick(function () {
                        console.log(document.querySelectorAll(".num1"));

                    });
                } else {
                    MessageBox('提示', msg)
                }
            }, ({data:{msg}}) => {
                MessageBox('提示', msg);
            });

            var count = 0;
            var setInt = setInterval(function () {
                count++;
                console.log(count++);
                console.log(document.querySelectorAll(".num1"));
                if (document.querySelectorAll(".num1")) {
                    clearInterval(setInt);
                }
            }, 500);

        },
        updated(){
            console.log(document.querySelectorAll(".num1"));
        },
        methods: {},
        components: {
            'c-header': cHeader,
            'footer-btn': footerBtn,
            Scroller
        }
    }

相关文章