vue初始化页面dom操纵 $nextTick

new Vue({
    el: '#app',
    data:{

    },
    mounted: function () {/*生命周期函数*/
        this.$nextTick(function () {
            $("#contLeft > li").click(function (i, j) {
                var index = $("#contLeft > li").index($(this));//这里的this不是vue对象哦
                $("#contLeft > li").removeClass("active");
                $("#contRight > li").removeClass("nweConActive");
                $("#contLeft > li").eq(index).addClass("active");
                $("#contRight > li").eq(index).addClass("nweConActive");
            });
            window.addEventListener('scroll', this.handleScroll);
        })
    },
    methods:{
        handleScroll () {
            var offsetTop = $("#contRight").offset().top;
            if((offsetTop - window.scrollY) <= 120){
                $(".Newguide-left").addClass('fixed_left')
            }else{
                $(".Newguide-left").removeClass('fixed_left')
            }
        }
    }
});

  需要使用到vue的生命周期函数mounted然后vue对象有个$nextTick方法用它来操纵dom;

  vue的生命周期见官网:生命周期示意图

猜你喜欢

转载自www.cnblogs.com/zhizou/p/10132210.html