반응형
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
- JavaScript
- CSS
- HOC
- webpack
- 리액트
- Vue transition
- v-html
- App.vue
- Vue.js
- sass
- mapGetters
- Wecode
- jsx
- react
- Vue
- storybook
- 댓글달기
- ES6
- nodejs
- express
- 쉬운설명
- MySQL
- TypeScript
- event
- vuex
- 자료구조
- scss
- 자바스크립트
- State
- input
Archives
- Today
- Total
목록search (1)
익명의 개발노트
[vue.js] debounce를 이용한 검색기능 구현
위 그림과 같이 보는대로 검색에 따른 내용물이 보이는 기능을 구현하려할때, 자바스크립트에서 디바운싱 기능을 이용하면 수월하게 작업할 수 있다. debounce 란? 특정시간이 지난 시점에서 이벤트가 하나만 발생하도록 제어하는 기술 연속적으로 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출하도록 하는 것 검색창 input에 search라는 data를 바인딩 시킨 후 input 이벤트를 작성한다. handleSearchInput(e) { this.search = e.target.value; if(this.search.length !== 0){ clearTimeout(this.debounce); this.debounce = setTimeout(() => { const filteredList = this..
코딩일기/TIL
2020. 7. 14. 19:22