vue.js 계산 속성이란 무엇입니까? (코드 예)

이 글에서는 구체적인 예시를 통해 Vue의 계산 속성을 소개하겠습니다.

계산 속성이란 무엇인가요?

계산 속성은 Vue의 데이터 속성과 비슷해 보이지만 일부 산술 및 비산술 작업을 수행할 수 있습니다.

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <li>Full name : {{firstName + &#39; &#39;+ lastName}}</li>
  </ul>
</template>

<script>
 data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
 }
</script>

위 코드에서는 firstName과 lastName이라는 두 개의 데이터 속성을 생성하여 템플릿에 삽입했습니다.

우리 템플릿을 보면 {{}} 중괄호 안에 전체 이름 논리를 추가했습니다.

Example

첫 번째 계산 속성을 생성하는 방법의 예입니다.

계산 속성은 계산 속성 개체에서 선언됩니다.

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <!-- 计算属性 -->
   <li>Full name : {{fullName}}</li>
  </ul>
</template>

<script>
export default{
     data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
  },
  computed:{
      fullName:function(){
          return this.firstName+&#39; &#39;+this.lastName
      }
  }
}

여기에 사용자의 전체 이름을 반환하는 함수인 fullName이라는 계산된 속성을 추가했습니다.

데이터 속성과 마찬가지로 템플릿에서 계산된 속성을 사용할 수 있습니다.

계산된 속성은 vue에 의해 캐시되므로 기본 데이터 속성이 변경될 때만 논리를 재평가합니다. 즉, firstName 또는 lastName이 변경되지 않은 경우 함수를 다시 실행하지 않고 이전에 계산된 결과만 반환합니다.

관련 추천: "javascript tutorial"

위 내용은 vue.js 계산 속성이란 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!