Vue에서 계산된 속성을 사용하는 방법
- 亚连원래의
- 2018-06-22 17:24:101615검색
이 글은 Vue 인스턴스의 계산된 속성과 메서드 예제를 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴보세요
이 글에서는 vue 계산 속성의 사용과 vue 인스턴스 메서드의 예를 소개합니다. 자세한 내용은 다음과 같습니다.
계산 속성
템플릿의 표현식은 매우 편리하지만 실제로는 간단한 작업에만 사용됩니다. 템플릿은 뷰의 구조를 설명하는 데 사용됩니다. 템플릿에 너무 많은 논리를 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 이것이 Vue.js가 바인딩 표현식을 하나의 표현식으로 제한하는 이유입니다. 둘 이상의 표현식 논리가 필요한 경우 계산된 속성을 사용해야 합니다.
vue 계산 속성
비즈니스 코드의 한쪽 끝의 실행 결과를 기반으로 속성 값을 반환하려는 경우 계산 속성을 사용할 수 있습니다.
계산 속성은 결과가 포함된 함수입니다. get 메소드와 set 메소드가 있는 get 메소드는 반환 값이 있어야 하고 반환 값이 있어야 합니다
<script src="lib/vue.js"></script>
<body>
<p id="box">
a = >{{a}}
b = > {{b}}
</p>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function () {
//业务代码
return this.a+1;
}
}
});
/**这样直接改属性的值不行的，需要调用计算属性的set方法**/
document.onclick = function(){
vm.b = 3;
};
</script>계산된 속성의 Set/get 메소드:
<script src="lib/vue.js"></script>
<body>
<p id="box">
a = >{{a}}
b = > {{b}}
</p>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function () {
return this.a+1;
},
set:function(val){
this.a = val;
}
}
}
});
/**这样直接改属性的值不行的，需要调用计算属性的set方法**/
document.onclick = function(){
vm.b = 3;
//默认调用计算属性的set方法
};
</script>vue 인스턴스의 간단한 메소드
vm이 이름입니다 생성된 vue 인스턴스 객체
vm.$ el ->는
vm.$data 요소입니다. ->는 data
vm.$mount입니다. -> :
var vm2 = new Vue({
data:{},
methods:{}
}).$mount('#box');는 다음과 같습니다.
var vm2 = new Vue({
el:'#box',
data:{},
methods:{}
});vm.$options -> 사용자 정의 속성 및 사용자 정의 메서드 가져오기
vue 인스턴스는 속성과 메서드를 사용자 정의할 수 있습니다. 예를 들어 $options를 호출해야 합니다. :
var vm2 = new Vue({
aa:'1',//自定义属性
show:function () {
alert(1);
},
el:'#box',
data:{},
methods:{}
});
vm2.$options.show();
console.log(vm2.$options.aa);vm.$destroy -> 객체 파괴
vm.$log(); -> 데이터의 현재 상태를 확인하세요
위 내용이 모두에게 도움이 되기를 바랍니다. 앞으로도 모든 사람에게.
관련 기사:
WeChat 미니 프로그램에서 이미지 전환 표시를 위해 스와이퍼 구성 요소를 사용하는 방법javascript에서 원형 광고 스트립을 구현하는 방법Vue의 디버깅 도구 vue-devtools 정보(자세히 설명) 튜토리얼)위 내용은 Vue에서 계산된 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!