수

Vue.js 필터링/ 정렬 된 결과 표시하기

· 2019-02-04 (월) 21:58:30 · 4436


필터링/ 정렬 된 결과 표시하기

 

때로 원본 데이터를 실제로 변경하거나 재설정하지 않고 배열의 필터링 된
버전이나 정렬된 버전을 표시해야 할 필요가 있습니다.
이 경우 필터링 된 배열이나 정렬된 배열을 반환하는 계산된 속성을 만들 수 있습니다.

예:
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
        })
    }
}

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
기타 19-02-04 조회 4,437
기타 19-02-04 조회 6,755
기타 19-01-31 조회 3,015
기타 19-01-31 조회 2,900
기타 19-01-31 조회 2,399
기타 19-01-28 조회 2,831
기타 19-01-28 조회 2,646
기타 19-01-28 조회 2,676
기타 19-01-24 조회 2,654
기타 19-01-24 조회 2,406
기타 19-01-24 조회 2,741
기타 19-01-23 조회 2,293
기타 19-01-23 조회 2,473
기타 19-01-23 조회 2,647
기타 19-01-22 조회 2,738
기타 19-01-22 조회 2,226
기타 19-01-22 조회 2,111
기타 19-01-21 조회 2,588
기타 19-01-16 조회 2,214
기타 19-01-16 조회 1,936
기타 19-01-16 조회 2,137
기타 19-01-12 조회 1,830
기타 19-01-12 조회 2,038
기타 19-01-12 조회 1,760
기타 19-01-11 조회 1,881
기타 19-01-11 조회 1,798
기타 19-01-11 조회 2,088
기타 19-01-10 조회 1,827
기타 19-01-10 조회 2,157
기타 19-01-10 조회 2,156