728x90 반응형 분류 전체보기329 [Vue.js] @keyup.enter : 엔터 키를 눌렀을 때 코드 실행하기 @keyup.enter를 활용하면 jQuery로 구현할 때보다 더 간단하고 직관적이게 코드를 작성할 수 있다. # jQuery로 구현한 코드 # Vue.js로 구현한 코드 2024. 5. 21. [Vue.js] nextTick : 재렌더링이 완료될 때까지 기다린 후 실행하기 nextTick데이터가 바뀌어서 재렌더링될 때, 바로 DOM 요소로 접근하려고 하면 해당 요소를 제대로 찾지 못한다.이때 nextTick을 활용하면 재렌더링이 완료된 후에 코드를 실행하도록 처리할 수 있다. // 변수 'var1'이 변경되었을 때 실행되는 코드watch(var1, (newVal, oldVal) => { nextTick(() => { // 실행할 코드 });}); 2024. 5. 17. [Vue.js] @error : 이미지 에러 발생 시 기본 이미지로 표시하기 이미지 에러 발생 시 기본 이미지로 표시하기 e.target.src = defaultImg" alt="슬라이드 이미지"> 'imgUrl' 변수에 저장된 경로로 이미지를 가져왔을 때 에러가 발생한다면 해당 img 태그의 src 속성을 'defaultImg' 변수에 저장된 경로로 변경하여 기본 이미지를 띄운다. 2024. 5. 17. [Vue.js] v-bind : 유동적으로 class, id 지정하기 조건에 따라 class 토글하기 변수의 값을 class로 지정하기...... id는 v-bind:id나 :id를 사용하면 된다. 예시 1) 변수 값에 따라 클래스 지정하기 ...... 예시 2) foreach 문에서 특정 값에 따라 클래스 지정하기 2024. 5. 17. [CSS] object-fit : 이미지 사이즈 맞추기 object-fit : fill (기본값) - 주어진 너비/높이에 딱 맞게 사이즈가 조절됨 (원본 비율 유지 X) object-fit : contain - 원본 비율을 유지하면서 이미지 전체를 보여줌 (여백이 생길 수 있음) object-fit : cover - 원본 비율을 유지하면서 컨테이너를 완전히 채움 object-fit : none - 원본 이미지 사이즈 유지 2024. 5. 14. 이전 1 2 3 4 ··· 66 다음 728x90 반응형
