在 VueJs 中添加/删除滚动类

Question

我正在尝试在滚动时向标题添加一个类并将其删除。但是失败。每次滚动时都会添加该类。因此，如果 ScrollY === 100，则该元素已添加类 100 次。如何使它只添加一次，并在 scrollY < 100 时将其删除？

我究竟做错了什么？

代码笔

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid fill-height class="priceContainer">
      <v-layout row wrap align-center justify-center>
        <v-flex xs12 sm12  text-center>
         <v-toolbar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      class="elevation-0 "
      fixed
      temporary
      @scroll="handleSCroll"
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer" ></v-toolbar-side-icon>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <span class="PriceLogoTitle hidden-sm-and-up">ELS</span>
        <span class="PriceLogoTitle hidden-sm-and-down">ELS</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- ?????? ????? -->
      <v-btn  class="navBtnEnter" flat>Enter <v-icon  right >account_box</v-icon></v-btn>
      <!-- ?????? ????? ????? -->
    </v-toolbar>
        </v-flex>   


        <!--  -->

      </v-layout>
    </v-container>
    </v-content>
  </v-app>
</div>


.priceContainer{
  background-image: radial-gradient( rgb(3, 237, 245),rgb(0, 126, 131));
  height: 1000px;
}
.theme--light.v-toolbar--bgchange {
    background-color: #009D95;
}

new Vue({
  el: '#app',
  methods:{
      handleSCroll (event) {
        let header = document.querySelector(".v-toolbar");
        if (window.scrollY > 100) {
        console.log(window.scrollY);
        header.className += " v-toolbar--bgchange";          
        }
      }
    },
    created () {
      window.addEventListener('scroll', this.handleSCroll);

    },
    destroyed () {
      window.removeEventListener('scroll', this.handleSCroll);
    } 
})

Answer 1

className是一个可以任意设置的字符串，不过滤掉重复的类。另一方面，classList.add()忽略重复的类名，因此您可以替换以下内容：

header.className += " v-toolbar--bgchange";

和：

header.classList.add("v-toolbar--bgchange");

删除类是通过classList.remove("v-toolbar--bgchange").