반응형
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
- input
- MySQL
- TypeScript
- App.vue
- sass
- 자료구조
- JavaScript
- react
- jsx
- event
- express
- Vue transition
- webpack
- 리액트
- storybook
- 자바스크립트
- vuex
- nodejs
- HOC
- ES6
- Wecode
- 댓글달기
- CSS
- mapGetters
- 쉬운설명
- Vue
- Vue.js
- State
- scss
- v-html
Archives
- Today
- Total
목록tab (1)
익명의 개발노트
[vue.js] typesctipt for문을 이용한 tab기능 구현
토글 버튼이나, 탭기능 구현을 함에 있어서 코드를 최대한 적게 쓰고 싶어서. for문을 이용하여 리스트를 만들고 탭 이름을 뿌려줬다. 클릭하면 html에서 클릭한 부분만 클래스 네임이 하나 더 추가되서 이벤트효과를 따로 부여했다. {{item.title}} 위 코드에서 클래스 추가하는 부분에 클릭하면 active 이름이 추가로 붙는다. (item.id 값이랑 선택한 것이랑 일치하면 클래스 명이 추가되도록 했음) tabMenuList는 아래와 같이 이루어져 있으며, 부모컴포넌트로부터 Prop으로 넘겨받는다. 별도의 파일로 만들어져 빼서 사용했다. //util/tabList.js export const storageBox = [ {title:'내 테마', id:'my_theme'}, {title:'좋아요',..
코딩일기/TIL
2020. 2. 12. 18:24