반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- event
- Vue transition
- storybook
- Vue
- vuex
- CSS
- State
- 자바스크립트
- mapGetters
- input
- TypeScript
- v-html
- webpack
- HOC
- 댓글달기
- react
- 리액트
- App.vue
- ES6
- express
- scss
- Vue.js
- sass
- MySQL
- 자료구조
- jsx
- nodejs
- Wecode
- 쉬운설명
- JavaScript
Archives
- Today
- Total
목록multi thumb nail (1)
익명의 개발노트
[vue.js] 이미지 박스???? 썸네일 박스?? 구현하기
이미지 있을때 파란 화살표가 옆으로 한칸씩 밀리는 기능 구현하기?? 기본적으로 회색, 파란색 + 버튼은 전부 이미지이다. 이미지가 3개 이므로, 조건을 걸어주고 다르게 보여주기로 생각했다. 기본적으로 9개는 html단에서 for문으로 돌려서 생성했고, 그 안에 이미지의 조건은 따로 만든 flag 배열의 인덱스 값으로 걸어주었다. 맨 처음부터 파란색 + 버튼으로 시작하기때문에 flag 배열의 값은 아래와 같이 할당했다. data(){ return { imageListFlag:[1, 0, 0, 0, 0, 0, 0, 0, 0], } }, 플래그 값은 파란색 플러스 버튼은 1, 이미지가 들어오면 2, 아무것도 없으면 0으로 조건을 주었다. 디자이너의 의견으로 회색버튼은 클릭이 안되게 동작해야한다. 그리고 파란 ..
코딩일기/TIL
2020. 6. 10. 13:40