vue에서 배열을 뒤집는 방법

Vue는 "v-for" 명령과 계산된 속성을 사용하여 배열을 반전할 수 있습니다. 구문 "

" 및 "computed:{reverseDIV(){return this. 항목 .reverse()}}".

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

배열을 역전시키는 vue 메서드

방법 1:

<template>
    <div>
        <div v-for="item in Array.prototype.reverse.call(items)">
            <li>{{item}}</li>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "List",
        data(){
            return{
                items:[1,2,3,4]
            }
        },
 
    }
</script>

방법 2(계산된 속성):

<template>
    <div>
        <div v-for="item in reverseDIV">
            <li>{{item}}</li>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "List",
        data() {
            return {
                items: [1, 2, 3, 4]
            }
        },
        computed: {
            reverseDIV() {
                return this.items.reverse()
            }
        }
    }
</script>

설명: 계산된 속성

유형: { [키: 문자열] : Function | { get: Function, set: Function } }

세부정보:

계산된 속성은 Vue 인스턴스에 혼합됩니다. 모든 getter 및 setter의 this 컨텍스트는 자동으로 Vue 인스턴스에 바인딩됩니다.

계산된 속성에 화살표 함수를 사용하면 구성 요소의 인스턴스를 가리키지 않지만 해당 인스턴스를 함수의 첫 번째 매개 변수로 계속 액세스할 수 있습니다.

computed: {
  aDouble: vm => vm.a * 2
}

계산된 속성의 결과는 캐시되며 종속 반응형 속성이 변경되지 않는 한 다시 계산되지 않습니다. 종속성(예: 비반응형 속성)이 인스턴스 범위를 벗어나면 계산된 속성이 업데이트되지 않습니다.

주로 소스 데이터를 오염시키지 않고 수행하는 일련의 작업

[관련 권장 사항: vue.js 튜토리얼]

위 내용은 vue에서 배열을 뒤집는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!