vue.js 의 computed,filter,get,set 의 용법 및 차이 점 상세 설명
복잡 한 논 리 를 처리 하고 캐 시 에 의존 하 며 의존 이 바 뀌 면 값 을 다시 가 져 옵 니 다.methods 로 도 같은 효 과 를 실현 할 수 있 지만,methods 는 다시 렌 더 링 할 때 다시 실행 되 며,성능 에 있어 서 는 coptute d 가 methods 보다 좋 으 며,캐 시 가 필요 없 을 때 methods 를 사용 할 수 있 습 니 다.
실례 1:computed 와 methods 반전 문자열
<template>
<div>
<input v-model="message">
<p> : {{ message }}</p>
<p> : {{ reversedMessage }}</p>
<p> : {{ reversedMessage2() }}</p>
</div>
</template>
<script>
export default {
data () {
return {
message: 'Runoob123!'
}
},
computed: {
// getter
reversedMessage: function () {
// `this` vm
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
}
</script>
실행 결과:실례 2:computed 의 get()과 set()용법
<template>
<div>
<select v-model="site">
<option value="Google http://www.google.com">Google http://www.google.com</option>
<option value="baidu http://www.baidu.co">baidu http://www.baidu.com</option>
<option value=" http://www.163.com"> http://www.163.com</option>
</select>
<p>name:{{name}}</p>
<p>url:{{url}}</p>
</div>
</template>
<script>
export default {
data () {
return {
name: 'Google',
url: 'http://www.google.com'
}
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
let names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
}
</script>
실행 결과:2.vue.js 의 필터 fliter 방법:
필 터 는 데 이 터 를 되 돌려 처리 한 후 처리 결 과 를 되 돌려 주 는 간단 한 함수 입 니 다.그러나 vue 2.0 버 전에 서 삭제 되 었 습 니 다.대체 방법 은 함 수 를 methods 에 쓰 는 것 입 니 다.
실례:
<template>
<div>
<input v-model="filterText"/>
<ul>
<li v-for="item in obj">
<span>{{myfilter(item.label)}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
obj: [
{value: 0, label: 'beijing'},
{value: 1, label: 'shanghai'},
{value: 2, label: 'guangdong'},
{value: 3, label: 'zhejiang'},
{value: 4, label: 'jiangshu'}
],
filterText: ''
}
},
methods: {
myfilter (value) {
if (value.indexOf(this.filterText) > -1) {
return value
}
}
}
}
</script>
실행 결과:3.vue.js 의 get 과 set 방법:
vue 에서 data 속성 은 데이터 변화 에 응답 할 수 있 습 니 다.내 부 는 data 의 속성 을 getter/setter 로 변환 합 니 다.vue 2.0 에서 get()과 set()는 coptute 계산 속성 에 사 용 됩 니 다.위의 coptute d 인 스 턴 스 에서 이미 언급 되 었 습 니 다.또한 vue 1.0 에서 계승 한 vm.$set(object,key,value)는 데이터 요 소 를 동적 으로 모니터링 하 는 데 사 용 됩 니 다.인 스 턴 스 생 성 후 배열 속성 을 추가 하고 이 방법 으로 응답 할 수 있 습 니 다.
<template>
<div>
<input v-model="opt" @blur="add()"/>
<ul>
<li v-for="item in arr">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
arr: [ ' ', ' ', ' ', ' ' ],
opt: ''
}
},
methods: {
add () {
this.$set(this.arr, this.arr.length, this.opt)
}
}
}
</script>
실행 결과:이상 vue.js 의 computed,filter,get,set 의 용법 과 차이 점 에 대한 상세 한 설명 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 부 탁 드 리 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.