프론트엔드
유튜브 강좌로 프론트엔드 개발을 배우고 아이디어를 직접 개발해서 스타트업 창업을 목표로 합니다.
#Nuxt 3
[Nuxt3-3] 처음으로 시작하는 Nuxt - 특정 엘리먼트에 클래스 토글 처리하기
뷰에서 컴포넌트 또는 DOM에 접근하기 위해 사용하는 속성 ref(), 컴포넌트가 마운트될 때 호출되는 함수, 컴포넌트가 마운트 해제될 때 호출되는 함수 이렇게 3개의 함수를 사용하여 스크롤 조건에 따라서 특정 엘리먼트에 클래스 토글 기능을 넣어본다.
<template>
<div class="header" :class="{ start: scrolled }"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
//ref
const scrolled = ref(false);
//토글 함수 - 스크롤 top 값이 0 일 때와 아닐 때 토글
function handleScroll() {
scrolled.value = window.scrollY > 0;
}
//컴포넌트가 마운트 될 때 호출
onMounted(() => {
window.addEventListener('scroll', handleScroll);
});
//컴포넌트가 마운트 해제될 때 호출
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
</script>채널을 구독하면 구독한 채널에 키워드를 등록할 수 있습니다.
..
Comments
키워드 내용에 대한 서로의 생각을 공유하고 댓글로 응원해주세요.
등록된 댓글이 없습니다.
