Vue computed 계산 속성 코드 인 스 턴 스
1.coptute d 에서 일부 속성 을 정의 할 수 있 습 니 다.이러한 속성 은[계산 속성]이 라 고 합 니 다.
2.속성 을 계산 하 는 본질은 하나의 방법 이지 만 보통 그들의 이름 을 속성 으로 사용 하고 방법 으로 호출 하지 않 습 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
methods: {},
computed:{
// computed ， ， 【 】
// ， ，
'fullname':function () {
return this.firstname + '-' + this.lastname;
}
}
})
</script>
</body>
</html>1.속성 을 계산 하고 호출 할 때()를 추가 하지 말고 일반 속성 으로 사용 합 니 다.
2.속성 을 계산 하 는 function 에서 인용 한 data 의 데이터 에 변화 가 생기 면 바로 이 계산 속성의 값 을 다시 계산 합 니 다.
3.속성의 값 을 구 하 는 결 과 를 계산 하면 캐 시 되 어 다음 에 직접 사용 하기에 편리 합 니 다.속성 을 계산 하 는 방법 에서 모든 데이터 가 바 뀌 지 않 으 면 다시 계산 하지 않 습 니 다.
내용 확장
vue 의 computed(속성 계산)사용 방법
vue 에서 간단 한 계산 은 템 플 릿 에서 직접 계산 할 수 있 습 니 다.예 를 들 어{{number+1};그러나 템 플 릿 에 복잡 한 계산 이 너무 많 으 면 유지 하기 어렵다.그래서 어떤 복잡 한 논리 에 대해 서도 속성 을 계산 하 는 원인 을 사용 해 야 한다.
1.처 리 를 통 해 되 돌아 오 는 데이터 값 은 원본 데이터 가 바 뀌 지 않 으 면 computed 함수 에서 해당 하 는 데이터 에 대해 변 하지 않 고 캐 시 가 로 컬 에 있 는 것 과 같 습 니 다.변 경 될 때 computed 가 대응 하 는 데이터 의 함수 도 변 경 됩 니 다.
2:computed 속성 과 methods 속성
당신 은 우리 가 method 를 호출 하여 같은 효 과 를 얻 을 수 있다 는 것 을 알 고 있 을 수 있 습 니 다.우 리 는 같은 함 수 를 하나의 계산 속성 이 아니 라 하나의 method 로 정의 할 수 있 습 니 다.최종 결과 에 대해 두 가지 방식 은 확실히 같 습 니 다.
그러나 계산 속성 은 그들의 의존 을 바탕 으로 캐 시 를 하 는 것 입 니 다.계산 속성 은 관련 의존 이 바 뀌 었 을 때 만 값 을 다시 구 할 수 있 습 니 다.이것 은 message 가 아직 바 뀌 지 않 았 다 면 reversedMessage 계산 속성 을 여러 번 방문 하면 이전에 계 산 된 결 과 를 즉시 되 돌려 주 고 함 수 를 다시 실행 하지 않 아 도 된다 는 것 을 의미 합 니 다.
3:coptute d 의 속성;
계산 속성 은 기본적으로 getter 만 있 지만 필요 할 때 setter 를 제공 할 수 있 습 니 다.
var vm=new Vue({
el:"#demo",
data:{
firstName:"foo",
lastName:"Bar",
fullName:"foo Bar"
},
computed:{
fullName:function(){
get:function(){
return this.firstName+" "+this.lastName;
},
setter:function(){
var names=newValue.split('');
this.firstName=names[0];
this.lastName=names[names.length-1]
}
}
}
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
