목록목록 (1)

코딩짜는 일상

[Alpine JS] 간단한 리스트 페이징 만들기

알파인 JS가 심플해서 마음에 든 김에 좀 살펴보다가 근래 리스트 페이징 만들 때 고생했던 게 떠올라 만들어 봤습니다. 인터넷에 검색하면 전부 ajax로 불러와서 들을 치환하라고 하는데 당시 조금 급하게 완성해야해서 머리도 안 돌아가고 당황했던 기억이...ㅜㅠ 각설하고 컨셉은~ 예제중 가장 첫번째인 x-on:clikc으로 x-data를 늘이고 줄이는 예제와 x-show와 x-transition을 이용해 해당 요소를 숨겼다 꺼내는 예제를 섞습니다! 연산자 중에 %가 있죠? x-data="{val: 0}"를 만들고 이걸 x-on:clikc으로 늘였다 줄이고요. x-show의 값은 val%'페이징갯수'=='현재페이지번호(0부터 시작)' 이렇게 해주면 해당 페이지만 true가 되면서 보여지고 다른 페이지들은 자..
IT/AlpineJS 2022. 10. 28. 12:55
이전 Prev 1 Next 다음