상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
궁금한 상식 보기
마이너스통장을 이용할 때 발생할 수 있는 수수료는 무엇인가요?
다이어트 중 식사 일기를 작성하는 것이 도움이 되나요?
다이어트 중 식이섬유의 역할은 무엇인가요?
요로결석의 증상으로 나타나는 배뇨 문제는 어떤 것들이 있나요?
요로결석의 예방을 위한 식사 계획은 어떻게 세워야 하나요?
외장하드디스크와 SSD의 차이점은 무엇인가요?
외장하드디스크의 데이터 복구 소프트웨어 추천은 무엇인가요?
로봇의 센서 종류에는 어떤 것들이 있나요?
건조기와 관련된 안전 수칙은 무엇인가요?
해운대의 해변에서의 자전거 도로는 어디에 있나요?
보더 콜리의 훈련을 위한 보상 방법은 무엇인가요?
스테로이드 사용이 체지방 분포에 미치는 영향은 어떤가요?
Previous
Next
수정하기 - Vue.js에서 필터는 어떻게 사용하나요?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
Vue.js에서 필터는 데이터를 변환하여 템플릿에서 표시할 때 유용하게 사용할 수 있는 기능입니다. 필터는 주로 문자열을 포맷하거나, 날짜를 변환하거나, 숫자를 특정 형식으로 표시하는 등의 작업에 사용됩니다. Vue.js의 필터는 Vue 인스턴스의 데이터에 직접적으로 영향을 미치지 않으며, 오직 템플릿에서 데이터를 표시할 때만 사용됩니다. 필터 사용 방법 1. 필터 정의하기 : Vue.js에서 필터는 `Vue.filter` 메서드를 사용하여 정의할 수 있습니다. 필터는 이름과 함수를 인자로 받습니다. 예를 들어, 문자열을 대문자로 변환하는 필터를 정의할 수 있습니다. ```javascript Vue.filter('uppercase', function(value) { if (!value) return ''; return value.toString().to<a href='https://sangseek.com/sangseeks/UpperCase/ko'>UpperCase</a>(); }); ``` 2. 필터 사용하기 : 필터는 템플릿에서 `|` 기호를 사용하여 적용할 수 있습니다. 위에서 정의한 `uppercase` 필터를 사용하려면 다음과 같이 작성합니다. ```html <div id="app"> <p>{{ message | uppercase }}</p> </div> ``` 여기서 `message`는 Vue 인스턴스의 데이터 속성으로, 필터를 통해 대문자로 변환된 결과가 표시됩니다. 3. 여러 필터 사용하기 : 필터는 여러 개를 연속으로 사용할 수 있습니다. 예를 들어, 문자열을 대문자로 변환한 후, 특정 문자열을 대체하는 필터를 추가할 수 있습니다. ```javascript Vue.filter('replace', function(value, search, replacement) { return value.replace(new RegExp(search, 'g'), replacement); }); ``` 템플릿에서 다음과 같이 사용할 수 있습니다. ```html <p>{{ message | uppercase | replace('HELLO', 'HI') }}</p> ``` 4. 필터에 인자 전달하기 : 필터는 추가 인자를 받을 수 있습니다. 위의 `replace` 필터 예제에서 `search`와 `replacement`는 필터에 전달된 인자입니다. 필터를 사용할 때 인자를 전달하려면 `:` 기호를 사용합니다. ```html <p>{{ message | replace('hello', 'hi') }}</p> ``` 5. 필터의 장점과 단점 : - 장점 : 필터는 코드의 가독성을 높이고, 템플릿에서 데이터를 쉽게 변환할 수 있게 해줍니다. 또한, 재사용성이 높아 여러 곳에서 동일한 변환 로직을 사용할 수 있습니다. - 단점 : 필터는 Vue 3에서 더 이상 권장되지 않으며, Composition API를 사용하는 경우에는 `computed` 속성을 사용하는 것이 더 좋습니다. 필터는 복잡한 로직을 처리하기에는 적합하지 않으며, 성능에 영향을 줄 수 있습니다. Vue 3에서의 필터 사용 Vue 3에서는 필터가 공식적으로 제거되었습니다. 대신, `computed` 속성을 사용하여 데이터를 변환하는 것이 권장됩니다. 예를 들어, 위의 `uppercase` 필터를 `computed` 속성으로 변환할 수 있습니다. ```javascript const app = Vue.createApp({ data() { return { message: 'hello world' }; }, computed: { uppercaseMessage() { return this.message.toUpperCase(); } } }); app.mount(' app'); ``` 템플릿에서는 다음과 같이 사용할 수 있습니다. ```html <p>{{ uppercaseMessage }}</p> ``` 결론 Vue.js에서 필터는 데이터를 변환하여 템플릿에서 표시하는 데 유용한 도구입니다. 그러나 Vue 3에서는 필터가 제거되었으므로, `computed` 속성을 사용하여 데이터를 변환하는 것이 더 바람직합니다. 필터를 사용하던 기존 Vue 2 사용자들은 이러한 변화를 인지하고, 새로운 방식으로 데이터 변환을 구현해야 합니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기