1. 程式人生 > >vue初始化頁面dom操縱 $nextTick

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的生命週期見官網:生命週期示意圖