이미지 에러 발생 시 기본 이미지로 표시하기 e.target.src = defaultImg" alt="슬라이드 이미지"> 'imgUrl' 변수에 저장된 경로로 이미지를 가져왔을 때 에러가 발생한다면 해당 img 태그의 src 속성을 'defaultImg' 변수에 저장된 경로로 변경하여 기본 이미지를 띄운다.

조건에 따라 class 토글하기변수의 값을 class로 지정하기......id는 v-bind:id나 :id를 사용하면 된다.  예시 1) 변수 값에 따라 클래스 지정하기 ......예시 2) foreach 문에서 특정 값에 따라 클래스 지정하기

object-fit : fill (기본값)  - 주어진 너비/높이에 딱 맞게 사이즈가 조절됨 (원본 비율 유지 X)  object-fit : contain  - 원본 비율을 유지하면서 이미지 전체를 보여줌 (여백이 생길 수 있음) object-fit : cover   - 원본 비율을 유지하면서 컨테이너를 완전히 채움  object-fit : none   - 원본 이미지 사이즈 유지

Vue로 구현하다 보면 렌더링이 완료되기 전에 {{ }}가 보이거나, v-if나 v-show로 처리한 요소들이 보이는 경우가 있다.사내에서 확인할 때에는 크게 거슬릴 정도는 아니었는데, 속도가 좀 느린 환경에서 실행할 때에는 꽤 오래 보일 때가 있어서 해결 방법을 알아 보았다. v-cloak을 지정하기 전 v-cloak'v-cloak'은 Vue 처리가 완료되면 자동으로 삭제되는 디렉티브이다.이를 활용하여, Vue.js에서 해당 요소가 렌더링되기 전까지 요소를 브라우저에서 감출 수 있다. 1. 스타일 설정/* [ ] : 속성 선택자 *//* 'v-cloak' 속성을 가진 요소에 해당 스타일을 적용함 */[v-cloak] { /* 해당 요소를 숨김 */ display: none;} 2. 렌더링이 ..

스크롤을 움직여도 window.scrollY가 0으로 고정되어 있는 문제가 있었다. 찾아보니 body에 height: 100%이 되어 있을 때 발생하는 문제라고 한다. 기존 csshtml,body {overflow-x: hidden; height: 100%;}수정body {overflow: hidden;}html {overflow-x: hidden;}height: 100%를 제거했더니 window.scrollY는 측정되는데 스크롤바가 2개가 생기는 문제가 있어서body는 overflow: hidden로 수직, 수평 스크롤바가 둘 다 보이지 않게 처리해서 해결했다.