Vue 의 computed(속성 계산)를 자세히 설명 하려 면 인 스 턴 스 의 TodoList 를 사용 하 십시오.
methods와computed두 속성의 차이 점 을 가지 고 TodoList 라 는 demo 를 써 보 았 습 니 다.(좋 은 흙 마스크 도망~)1. methods
methods 는 react 의 구성 요소 와 유사 한 방법 으로 vue 가 사용 하 는 html 바 인 딩 이벤트 와 다 릅 니 다.
예 를 들다
/*html*/
<input type="button" value=" " v-on:click='handlClick' id="app">
/*js*/
var app = new Vue({
el:'#app',
methods:{
handlClick:function(){
alert('succeed!');
},
}
})
2. computed
/*html*/
<div id="app2">{{even}}</div>
/*js*/
var app2 = new Vue({
el:'#app2',
data:{
message:[1,2,3,4,5,6]
},
computed:{
even:function(){ //
return this.message.filter(function(item){
return item%2 === 0;
});
},
},
});
message 가 변 하지 않 았 는 지,원래 message 인지,콘 솔 에서 message 를 수정 해 보 세 요.
수정 후 나 는 인위적인 트리거 함수 가 없 었 고 왼쪽 에 있 는 디 스 플레이 는 새로운 배열 의 짝수 선택 집합 이 되 었 다.
3.구별
methods 는 일종 의 상호작용 방법 으로 사용자 의 상호작용 동작 을 methods 에 쓴다.컴퓨터 d 는 데이터 가 변 할 때 mvc 의 module 에서 view 로 의 데이터 변환 매 핑 이다.
쉽게 말 하면 methods 는 인위적인 트리거 가 필요 하 며,coptute d 는 data 데이터 변 화 를 감지 할 때 자동 으로 트리거 되 며,또 하 나 는 성능 소모 의 차이 점 입 니 다.이 는 설명 하기 쉽 습 니 다.
우선,methods 는 방식 입 니 다.방법 을 계산 한 후에 쓰레기 회수 체 제 는 변 수 를 회수 하기 때문에 다음 에 짝수 선별 을 요구 할 때 다시 값 을 구 할 것 입 니 다.한편,coptute d 는 데이터 에 의존 할 것 입 니 다.패 킷 을 닫 는 것 처럼 데이터 점용 메모리 가 쓰레기 에 의 해 회수 되 지 않 기 때문에 선별 짝수 집합 에 다시 방문 하여 다시 계산 하지 않 고 지난번 에 계 산 된 값 을 되 돌려 줍 니 다.data 의 데이터 가 바 뀌 었 을 때 다시 계산 합 니 다.쉽게 말 하면 methods 는 캐 시 없 이 한꺼번에 계산 하고 coptute d 는 캐 시 있 는 계산 입 니 다.
4.TodoList 예
Vue 홈 페이지 의 todo 예 를 살 펴 보 니 필터 기능 이 없 는 것 같 아서 필터 기능 이 있 는 예 를 적 었 습 니 다.다음 코드 에 서 는@click 의 뜻 은 v-on='click'의 약자 입 니 다.class=의 뜻 은 v-bin:'class'=의 약자 입 니 다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<style>
.wrap{
width: 400px;
background-color: #ccc;
margin: 0 auto;
}
i{
color: #f00;
font-size: 12px;
margin-left: 20px;
cursor: pointer;
}
i:hover{
font-weight: 700;
}
ol{
/*white-space: nowrap;*/
word-wrap:break-word;
}
.done{
text-decoration: line-through;
}
.not{
}
</style>
</head>
<body>
<div class="wrap" id="todos">
<input type="text" v-model='nextItem' @keyup.enter='append'>
<button id="append" @click='append'> </button>
<ol>
<li v-for='(item,index) of comp'
:key=item.id
:class='item.state ? "not" : "done"'>
{{item.text}}
<i @click='remove(index)'> </i>
</li>
</ol>
<button @click='all'> </button>
<button @click='done'> </button>
<button @click='todos'> </button>
</div>
</body>
<script>
var todos = new Vue({
el:'#todos',
data:{
nextItem: '',
nextID: 1,
list: [],
type: null,
},
computed:{
comp:function(){
if( this.type === 0 ){
return this.list;
}
else if(this.type === 1){ //show all
return this.list.filter(function(item){
return true;
})
}
else if(this.type === 2){ //done
return this.list.filter(function(item){
return item.state ? false : true;
})
}
else if(this.type === 3){ //todos
return this.list.filter(function(item){
return item.state ? true : false;
})
}
}
},
methods:{
append:function(){// todo
this.list.push({
id:this.nextID++,
text:this.nextItem,
state: true,
});
this.nextItem = '';
this.type = 0;
},
remove:function(index){ // donelist
this.list[index].state = !this.list[index].state;
},
all:function(){
this.type = 1;
},
done:function(){
this.type = 2;
},
todos:function(){
this.type = 3;
}
}
});
</script>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
