class binding 썸네일형 리스트형 [Javascript+Vue.js] Scrollbar 여부에 반응하는 엘리먼트 만들기(with Class and Style Binding) INTRO 웹 페이지를 개발하다보면, 유효성 체크를 위해 기존 엘리먼트에 별도의 아이콘을 배치하는 경우가 있다. 본 포스팅에서는 아이콘과 스크롤바가 겹치는 현상을 해결한 경험을 공유한다. 1. 하고자 했던 것 - 위의 네이버 예시를 보면, 자물쇠 모양은 해당 필드의 유효성 통과 유무에 따라 달라진다. - 프로젝트 진행 도중, - input 이 아닌 text area에 해당 기능을 똑같이 구현해야 할 일이 생겼다. - 그래서 v-model로 바인딩 된 변수를 감지하며 유효성 체크 로직을 적용하였고, - 유효성 검증 통과 여부에 따라 동적으로 style을 다르게 적용하여 해결. :class="{ 'check-ok': isValid === true, 'check-false': isValid === false,.. 더보기 이전 1 다음
