Vue.js 필터링/ 정렬 된 결과 표시하기
필터링/ 정렬 된 결과 표시하기
때로 원본 데이터를 실제로 변경하거나 재설정하지 않고 배열의 필터링 된
버전이나 정렬된 버전을 표시해야 할 필요가 있습니다.
이 경우 필터링 된 배열이나 정렬된 배열을 반환하는 계산된 속성을 만들 수 있습니다.
예:
HTML 부분
<li v-for="n in evenNumbers">{{n}}</li>
JS부분
data:{
numbers: [1,2,3,4,5]
},
computed:{
evenNumbers:function(){
return this.numbers.filter(function(number){
return number %2 === 0
})
}
}
계산된 속성을 실행할 수 없는 상황(예: 중첩된 v-for 루프 내부)에서는
다음 방법을 사용할 수 있습니다.
HTML 부분
<li v-for="n in even(numbers)">{{n}}<li>
JS부분
data:{
numbers: [1,2,3,4,5]
},
methods:{
even: function(numbers){
return numbers.filter(function(number){
return number % 2 === 0
})
}
}
게시판 목록
퍼블리셔팁
퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 47 | HTML |
|
19년 전 | 4543 | |
| 46 | HTML |
|
19년 전 | 5406 | |
| 45 | HTML | 19년 전 | 3295 | ||
| 44 | HTML |
|
19년 전 | 4378 | |
| 43 | HTML | 19년 전 | 3791 | ||
| 42 | HTML |
|
19년 전 | 3769 | |
| 41 | HTML |
|
19년 전 | 4267 | |
| 40 | HTML |
세은아빠2
|
19년 전 | 3932 | |
| 39 | HTML | 19년 전 | 4283 | ||
| 38 | HTML |
|
20년 전 | 6041 | |
| 37 | HTML |
yesmoa
|
20년 전 | 6719 | |
| 36 | HTML | 20년 전 | 3828 | ||
| 35 | HTML | 20년 전 | 5032 | ||
| 34 | HTML | 20년 전 | 4506 | ||
| 33 | HTML | 20년 전 | 3737 | ||
| 32 | HTML | 20년 전 | 3827 | ||
| 31 | HTML | 20년 전 | 4580 | ||
| 30 | HTML |
|
20년 전 | 6663 | |
| 29 | HTML |
|
20년 전 | 8599 | |
| 28 | HTML | 20년 전 | 7230 | ||
| 27 | HTML | 20년 전 | 4087 | ||
| 26 | HTML | 20년 전 | 2567 | ||
| 25 | HTML | 20년 전 | 3074 | ||
| 24 | HTML | 20년 전 | 6832 | ||
| 23 | HTML | 21년 전 | 4902 | ||
| 22 | HTML | 21년 전 | 4839 | ||
| 21 | HTML | 21년 전 | 3693 | ||
| 20 | HTML | 21년 전 | 4830 | ||
| 19 | HTML | 21년 전 | 4720 | ||
| 18 | HTML |
prosper
|
21년 전 | 3560 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기