Vue에서 계산된 속성을 사용하는 방법-JS 튜토리얼-php.cn

Vue에서 계산된 속성을 사용하는 방법

小云云

풀어 주다： 2017-12-12 13:07:12

원래의

2176명이 탐색했습니다.

계산된 속성

템플릿의 표현식은 매우 편리하지만 실제로는 간단한 작업에만 사용됩니다. 템플릿은 뷰의 구조를 설명하는 데 사용됩니다. 템플릿에 너무 많은 논리를 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 이것이 Vue.js가 바인딩 표현식을 하나의 표현식으로 제한하는 이유입니다. 둘 이상의 표현식 논리가 필요한 경우 계산된 속성을 사용해야 합니다. 이 글은 주로 vue 계산된 속성의 사용과 vue 인스턴스의 메서드 예제를 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 모두에게 도움이 되기를 바랍니다.

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:&#39;#box&#39;, 
    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:&#39;#box&#39;, 
    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 -> 노드 객체에 vue 객체를 마운트하십시오 vue 인스턴스는 속성과 메소드를 사용자 정의할 수 있습니다. 호출해야 하는 경우 $options를 호출해야 합니다. 예:

var vm2 = new Vue({ 
    data:{}, 
    methods:{} 
  }).$mount(&#39;#box&#39;);

로그인 후 복사

vm.$destroy -> 객체 파괴

vm.$log( ); -> 현재 데이터 상태 확인

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Vue에서 계산된 속성을 사용하는 방법