vue.js의 계산된 속성 소개

零到壹度
풀어 주다: 2018-04-13 17:24:33
원래의
952명이 탐색했습니다.

이 글의 내용은 vue.js의 계산 속성에 대한 소개입니다. 특정 참조 값이 있습니다. 필요한 친구가 이를 참조할 수 있습니다.

  • 계산 방법
    - 계산 속성 reversedMessage를 선언합니다. . 제공된 함수는 vm.reversedMessage 속성에 대한 getter로 사용됩니다. vm.reversedMessage는 vm.message에 따라 달라집니다. vm.message가 변경되면 vm.reversedMessage도 업데이트됩니다.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>
로그인 후 복사
로그인 후 복사
  • methods 방법
    -효과는 동일하지만 종속성 캐시를 기반으로 계산되며 관련 종속성이 변경될 때만 재평가됩니다. 메서드를 사용하면 다시 렌더링할 때 항상 함수가 호출되고 다시 실행됩니다.

methods: {
  reversedMessage2: function () {
    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}
로그인 후 복사
로그인 후 복사
  • computed 속성에는 기본적으로 getter만 있지만 필요한 경우 setter를 제공할 수도 있습니다. 원래 속성을 업데이트하는 데 사용됩니다.

  • computed 메서드
    -계산된 속성 reversedMessage를 선언합니다. 제공된 함수는 vm.reversedMessage 속성에 대한 getter로 사용됩니다. vm.reversedMessage는 vm.message에 따라 달라집니다. vm.message가 변경되면 vm.reversedMessage도 업데이트됩니다.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>
로그인 후 복사
로그인 후 복사
  • methods 방법
    -효과는 동일하지만 종속성 캐시를 기반으로 계산되며 관련 종속성이 변경될 때만 재평가됩니다. 메서드를 사용하면 다시 렌더링할 때 항상 함수가 호출되고 다시 실행됩니다.

methods: {
  reversedMessage2: function () {
    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}
로그인 후 복사
로그인 후 복사
  • 계산 속성에는 기본적으로 getter만 있지만 필요한 경우 setter를 제공할 수도 있습니다. 원래 속성을 업데이트하는 데 사용됩니다

위 내용은 vue.js의 계산된 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!