4. Vue 계산 속성

목차

1. 계산 속성이란 무엇입니까?

둘째, 계산된 속성의 사용?


1. 계산 속성이란 무엇입니까?

계산된 속성: 일련의 작업을 거쳐 최종적으로 속성 값을 얻습니다. 이 동적으로 계산된 속성 값은 템플릿 구조 [v-bind, interpolation expression] 또는 methods 메서드에서 사용할 수 있습니다.

둘째, 계산된 속성의 사용?

 <div :style="{backgroundColor: rgb}">{ { rgb }}</div>

 var vm = 새로운 Vue({

            엘: "#앱",

            데이터: {

                r: 0,

                g: 0,

                b: 0

            },

            // 계산된 모든 속성은 계산된 노드에 기록됩니다.

            // 계산된 속성은 정의될 때 메서드로 정의되어야 합니다.

            계산: {

                // 마지막으로 이 메서드에서 직접 사용할 수 있는 생성된 문자열 속성을 반환합니다.

                RGB() {

                    `rgb(${this.r}, ${this.g}, ${this.b})`를 반환합니다.

                }

            }

        })

        console.log(vm);

계산된 속성의 특징:

정의할 때는 메소드 로 정의해야 하지만 사용할 때는 일반 속성 으로 사용할 수 있다 .

혜택:

1) 구현된 코드 재사용

2) 계산된 속성의 종속 데이터 소스가 변경되면 그에 따라 계산된 속성도 재평가됩니다.

추천

출처blog.csdn.net/Mr_LiuP/article/details/123327917