inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

프로젝트로 배우는 Vue.js 3

34 Pagination 3

33강 pagination 에서 질문이 있습니다

222

uni0709

작성한 질문수 1

0

 

안녕하세요.

33강 pagination 2 듣는 중에 궁금한 점이 생겼는데요.

6:50초 쯤에 class="page-item" 을 class="page-item active" 로 변경하니 전체 페이지 버튼이 파랗게 되는 것을 보여주셨었는데요.

이걸 현재 페이지만 파랗게 보이게 하려고

class="page-item"

:class="currentPage === page? : 'active' : '' "

와 같이 지정해주신 걸 봤습니다.

조건은 이해했는데, 조건이 충족되서 :class='active' 가 되면 class 가 "page-item active" 로 바뀐다는게 이해가 잘 안되서요.

구글링을 해도 뭐라 검색해야할지 잘 모르겠어서 답이 안나오네요.

동일한 이름으로 바인딩을 해주면 접미사로 자동으로 붙는 건가요??

웹앱 vuejs vuex

답변 1

0

코지 코더

class="" 에 들어간 class는 항상 거기에 있는거고

:class="" 에 들어간 경우는 조건에 만족할때 들어가게 됩니다

그래서 class="page-item" 여기서 page-item은 항상 들어가 있는거고

:class="currentPage === page? : 'active' : '' " 이 부분에서는 currentPage가 page랑 같을때 active가 class에 들어가게 됩니다

그래서 class="page-item active"가 되는것이죠

currentPage가 page랑 같지 않을 경우엔 빈 문자열에 들어가서 class="page-item" 인것이구요

 

추가 질문 있으시면 다시 질문 올려주세요 ^^

numberOfPages 결과 nan

0

426

2

todos 질문입니다.

0

295

2

작동은 되긴 하는데 해당 메세지는 왜 뜨는걸까요?

1

374

0

강의노트 문의

0

379

1

x-total-count 및 db.json id값 문제

0

924

1

개발툴 글자체, 크기, 색깔 세팅 문의

0

225

1

onMount 관련 강의가 몇강에 있었죠?ㅠㅠ

0

309

1

json server실행/중지 문의드립니다!

0

486

1

3:53 분에 HelloWorld 태그 인식을 못해서 오류 발생하비낟!

0

471

1

Composition API?

0

397

1

24강에서 computed의 종속성이 변경도록 return하는데, 그러면 computed가 다시 실행되나요?

0

404

1

구조가 다름...

0

488

1

59강 API body 질문입니다.

0

303

1

로그인과 같이 레이아웃이 완전 다른 페이지를 만들때는 router 를 어떻게 할까요?

0

439

1

vue CLI 설치 관련 문의드립니다.

0

594

1

31강 DB질문

0

419

1

to와 :to의 차이점

0

451

1

52강의 originalTpdp ref 와 todo ref

0

555

1

delete todo 함수를 prop으로 내려주지 않는 이유는 무엇인가요??

0

414

1

computed 와 검색 기능 추가 질문드려요.

0

447

1

[33강] pagination2 numberOfPages 호출

0

382

1

리렌더링 관련 질문

0

339

1

배포 관련 질문드립니다.

0

314

1

30강 질문드립니다.

0

224

1