Vue.js 使用vuejs滚动事件时更改导航栏的背景色

使用Vuejs滚动事件时，如何更改导航栏的背景色。我用这个答案尝试了V-scroll事件 这是代码，但它不起作用

<nav v-scroll="handleScroll">
        <div class="logo">
          <img src="../assets/images/logo.png" alt="logo" />
          <button id="mobBtn" @click="displayList">
            <i class="fas fa-bars"></i>
          </button>
        </div>

        <ul class="navlist" id="mobList">
          <li>
            <a href>Home</a>
          </li>
          <li>
            <a href>About</a>
          </li>
          <li>
            <a href>Blog</a>
          </li>
          <li>
            <a href>Contact</a>
          </li>
        </ul>
      </nav>
<script>
export default {
  name: "Header",
  data: {},
  methods: {
  handleScroll: function (evt, el) {
    alert("Dddd")
      if (window.scrollY > 50) {
        el.setAttribute(
          'style',
          'background-color: red;'
        )
      }
      return window.scrollY > 100
    }
};
</script>

导出默认值{
名称：“标题”，
数据：{}，
方法：{
handleScroll：功能（evt，el）{
警报（“Dddd”）
如果（window.scrollY>50）{
el.setAttribute(
“风格”，
'背景色：红色；'
)
}
返回窗口。滚动>100
}
};

将事件侦听器添加到您的窗口，并将新数据分配到数据模型，并在滚动事件启动时更新其值。请参阅下面的代码

日期型号

data: {
    scrollPosition: null
},

方法

methods: {
    updateScroll() {
       this.scrollPosition = window.scrollY
    }
}

安装的挂钩

mounted() {
    window.addEventListener('scroll', this.updateScroll);
}

现在在你的情况下，把这个放在导航栏上

<nav :class="{change_color: scrollPosition > 50}">
      ...
      ...
</nav>

...
...

并将css添加到您的change_color类中

<style scoped>
   .change_color {
       background-color:red
   }
</style

.换颜色{
背景颜色：红色
}
这是你的问题吗？