我正在尝试使用 ScrollY 属性有条件地渲染我的应用程序中的主菜单。
changeCss 函数正在工作,当滚动超过 500px 时,我从控制台日志中得到“true”和“false”,但 v-if 不起作用。
有没有办法可以在 onMounted() 函数之外访问此出现变量以使 v-if 工作?我无法访问“this”,因为我正在使用组合 API 和
这是我的脚本:
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RouterView } from "vue-router";
import Menu from "./components/menu.vue";
let appear: Boolean = true
onMounted(() => {
function changeCss() {
var bodyElement = document.querySelector("body");
var navElement = document.querySelector("nav");
scrollY > 500 ? appear = false : appear = true;
scrollY > 500 ? console.log(appear) : console.log(appear);
}
window.addEventListener("scroll", changeCss, false);
})
</script>
这是我的模板:
<template >
<div class="app">
<div v-if="appear">
<Menu></Menu>
</div>
<div class="router_view">
<RouterView />
</div>
<div>
<!-- footer -->
</div>
</div>
</template>
您必须使用 ref() 使“出现”变量“反应”(这意味着模板应该对变量更改进行“反应”)
缺点是您必须通过“.value”属性读取/写入变量。
类似这样的事情
<script setup lang="ts">
....
let appear = ref(true);
....
onMounted(() => {
function changeCss() {
....
apppear.value = false;
....
}
window.addEventListener("scroll", changeCss, false);
})
</script>