Как перевести этот jQuery синтаксис во Vue?

Question

[asferot]

Как перевести этот jQuery синтаксис во Vue?

$(window).on("scroll", function () {
    var scrolled = $(this).scrollTop();
    if( scrolled > 107 ) {
        $('.content').addClass('scrolled');
    }   
    if( scrolled <= 107 ) {     
        $('.content').removeClass('scrolled');
    }
});

Comments

[Алексей Ярков]

А вы попробовали и у вас не вышло? Или надо за вас сделать?

Answer 1

[0xD34F]

Добавим в компонент свойство, которое будет содержать в себе текущее значение прокрутки:

data: () => ({
  scroll: 0,
  ...
}),

Чтобы значение было актуальным, будем обновлять его при наступлении соответствующего события:

created() {
  window.addEventListener('scroll', () => this.scroll = window.scrollY);
},

Сделаем вычисляемое свойство, которое будет представлять классы, назначаемые элементу в зависимости от текущего значения прокрутки:

computed: {
  scrollClasses() {
    return что-то, в зависимости от значения this.scroll;
  },
  ...
},

<div :class="scrollClasses"></div>

https://jsfiddle.net/o1hjb79u/

Comments

[asferot]

Благодарю, все понятно стало

[alex-1917]

а если на ванильке - еще короче. ох уж этот vue