VUE3 빠른 시작: 계산된 속성을 사용하여 데이터 계산

VUE3 빠른 시작: 계산된 속성을 사용하여 데이터 계산

VUE는 MVVM 패턴을 기반으로 하는 프런트엔드 프레임워크로, 세계에서 가장 인기 있는 프런트엔드 프레임워크 중 하나로 발전했습니다. VUE3는 VUE의 최신 버전으로 개발자에게 더 나은 성능과 개발 경험을 제공합니다. VUE3에서 계산된 속성은 데이터의 값을 쉽게 계산하고 데이터가 업데이트될 때 자동으로 업데이트할 수 있는 매우 유용한 도구입니다.

이 문서에서는 계산된 속성을 사용하여 데이터를 계산하는 방법을 소개하고 몇 가지 실제 사용 사례를 보여줍니다.

1. 계산 속성 소개

계산 속성은 템플릿에서 사용되는 속성을 말하며 그 값이 계산됩니다. 계산된 속성은 일반적으로 데이터 필터링, 데이터 형식 지정 등과 같은 데이터 바인딩의 복잡한 작업에 사용됩니다. 계산된 속성은 반응적이며 해당 속성이 의존하는 데이터가 변경되면 해당 값이 자동으로 업데이트됩니다.

2. 계산된 속성 사용

VUE3에서는 계산된 속성이 함수를 정의하여 구현됩니다. 계산된 속성은 구성 요소의 속성에서 계산된 키워드를 사용하여 정의할 수 있습니다. 간단한 예는 다음과 같습니다.

template:

<div>{{message}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe'
        };
    },
    computed: {
        message() {
            return `Hello, ${this.firstName} ${this.lastName}!`;
        }
    }
}

위의 예에서는 계산된 속성 메시지가 정의되어 있으며, 이 속성의 값은 firstName과 lastName을 연결하여 얻은 문자열입니다.

3. 계산된 속성의 사용 사례

a. 데이터 필터링

다음은 필터를 사용하여 특정 조건을 충족하는 배열 요소를 필터링하는 예입니다.

<div v-for="item in filteredItems">{{item}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            items: ['apple', 'banana', 'orange'],
            filterKey: 'a'
        };
    },
    computed: {
        filteredItems() {
            return this.items.filter(item => item.indexOf(this.filterKey) > -1);
        }
    }
}

위의 예에서 변수 items가 정의된 다음 계산된 속성filteredItems를 정의하여 값에 filterKey가 포함된 항목 배열의 요소가 필터링됩니다.

b. 데이터 형식화

계산된 속성을 사용하여 데이터 형식을 지정할 수도 있습니다. 다음은 계산된 속성을 사용하여 날짜를 문자열로 형식화하는 예입니다.

template:

<div>{{formattedDate}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            date: new Date()
        };
    },
    computed: {
        formattedDate() {
            return `${this.date.getFullYear()}-${(this.date.getMonth() + 1).toString().padStart(2,'0')}-${this.date.getDate().toString().padStart(2,'0')}`;
        }
    }
}

위 예에서 , Date 타입의 변수 날짜를 정의한 후 계산된 속성 formattedDate를 통해 "yyyy-MM-dd" 문자열로 포맷됩니다.

4. 요약

계산된 속성은 데이터에 대해 다양하고 복잡한 계산을 수행할 수 있는 VUE3의 매우 편리한 도구입니다. 이를 사용할 때 종속 데이터가 변경되면 계산된 속성의 값이 자동으로 업데이트되도록 데이터의 종속성에 주의해야 합니다.

위 내용은 VUE3 빠른 시작: 계산된 속성을 사용하여 데이터 계산의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!